HTML中Colspan属性失效求助：多余列无法移除

问题根源 #

你的表格出现多余列、colspan不生效的核心原因是表格行的列数不统一：外层表格总列数为6（由第一行colspan="5"+1列得出），但最后一行仅放置了4个未合并的<td>，浏览器会自动补全缺失的列，导致整个表格布局错乱，进而影响到“Others(Please specify)”所在行的显示。

修复步骤 #

1. 统一表格列数：调整最后一行的<td>的colspan属性，确保所有行合并后的列数总和为6。比如将“Amount”所在的<td>设置为colspan="3"，这样1+1+1+3=6，匹配总列数。
2. 优化内层表格样式：给.innerTable添加width:100%，让内层表格填满父容器，避免内容溢出产生多余列。

修改后的完整代码 #

CSS部分 #

body {
    font-family: "Times New Roman", Times, serif;
    font-size: 12px;
}
 
.container-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    height: 100vh;
    margin: 0;
    background-color: #cccccc;
}
 
.container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 5%;
    background-color: #f0f0f0;
    border-radius: 8px;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
    margin-bottom: 20px;
    padding: 0 10px;
}
 
.print-button {
    background-color: #b2c2ce;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 8px 12px;
    cursor: pointer;
    margin-right: 500px;
}
 
.container-body {
    width: 210mm;
    height: 297mm;
    background-color: #ffffff;
    box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    padding: 20px;
    position: relative;
    padding: 50px;
}
 
.appendix {
    position: absolute;
    top: 65px;
    right: 50px;
    font-size: 14px;
    font-style: italic;
}
 
table {
    border: 1px solid;
    border-collapse: collapse;
    width: 100%;
    margin-top: 40px;
}
 
th,
td {
    border: 1px solid #000000;
    text-align: left;
    padding: 8px;
}
 
th {
    background-color: #f2f2f2;
}
 
.center-text {
    text-align: center;
    vertical-align: top;
}
 
@media print {
    .container {
        display: none;
    }
 
    .container-body {
        background-color: #f0f0f0;
        box-shadow: none;
        width: 210mm;
        height: 297mm;
    }
 
    .container h3 {
        color: transparent;
    }
 
    .container-wrapper {
        align-items: flex-start;
    }
 
    table {
        margin-top: 15px;
    }
 
    .appendix {
        top: 10px;
    }
 
    /* Adjust font size for Disbursement Voucher in print */
    .center-text b {
        font-size: 14px;
    }
}
.innerTable{
    margin:0px;
    border-color:white;
    width:100%; /* 新增：让内层表格填满父容器 */
}
.lastRow{
    padding:0px;
}

HTML部分 #

<div class="container-wrapper">
    <div class="container">
        <h3></h3>
        <button class="print-button" onclick="window.print()">Print</button>
    </div>
    
    <div class="container-body">
        <span class="appendix">Appendix 32</span>
        <table>
        <thead>

        </thead>
        <tbody>
            <tr>
            <td colspan="5" rowspan="4" class="center-text">Department of Social Welfare and Development <br> Capitol Site, Butuan City  <br> <br> <br> <br><b>DISBURSEMENT VOUCHER</b></td>
            <td><b> Fund Cluster : <br>Cluster O1 </b></td>
            </tr>
            <tr>

            <td><b>Date : </b></td>
            </tr>
            <tr>
            <td style="background-color:#c6e0b4; border:1.8px solid;"><b> DV No. : </b></td>
            </tr>
            <tr>
            <td></td>
            </tr>
            <tr>
            <td colspan="6" class="lastRow">
                <table class="innerTable">
                <tr>
                    <td><b>Mode of <br> Payment</b></td>
                    <td>
                    <span style="margin-right: 20px;"></span> 
                    <input type="checkbox"> MDS Check 
                    <span style="margin-right: 20px;"></span>
                    <input type="checkbox"> Commercial Check 
                    <span style="margin-right: 20px;"></span>
                    <input type="checkbox"> ADA
                    <span style="margin-right: 20px;"></span> 
                    <input type="checkbox"> Others (Please specify) _______
                    </td>
                </tr>
                </table>
            </td>
            </tr>
            <tr>
            <td width="50" height="30" colspan="1"> <b>Payee</b></td>
            <td width="150" colspan="3" style="font-size: 14px;"><b>LBP</b></td>
            <td style="font-size: 10px;" width="170">TIN/Employee No.:</td>
            <td></td>
            </tr>
            <tr>
            <td width="50" rowspan="2" height="30" colspan="1"> <b>Address</b></td>
            <td colspan="3" rowspan="2" style="font-size: 14px;"><b>DSWD, CAPITOL SITE, BUTUAN CITY</b></td>
            <td colspan="2" rowspan="1" class="lastRow">
                <table class="innerTable">
                <tr><td><b>Initiator:</b></td></tr>
                <tr><td><br></td></tr>
                </table>
            </td>
            </tr>
            <tr></tr>
            <tr>
                <td colspan="1" >Particulars</td>
                <td colspan="1">Responsibility Center</td>
                <td colspan="1">Responsibility Center</td>
                <td colspan="3">Amount</td> <!-- 修改：colspan设为3，确保总列数为6 -->
            </tr>
        </tbody>
        </table>
    </div>
    </div>

说明 #

• 调整最后一行的Amount列colspan="3"，让该行合并后的列数总和为6，与表格总列数一致，消除浏览器自动补列的问题。
• 给.innerTable添加width:100%，确保内层表格完全填充父容器的<td>，避免内容溢出导致的多余列显示。

内容的提问来源于stack exchange，提问作者marivic valdehueza