如何让HTML表格首行三列与下方对应列宽度适配对齐？

问题核心原因 #

你用嵌套表格实现Marks下的子表头，这个嵌套表格和外部主表格的列是完全独立的，根本没法和下方的三个数据列对齐宽度。再加上硬写的!important强制宽度、margin-left:-10px这类偏移样式，还有冗余的空表格，进一步打乱了布局。

修复步骤 #

1. 替换嵌套表格，改用表头多行结构
   把主表格的表头拆成两行：第一行的Marks单元格用colspan="3"跨三列；第二行直接放三个对应子表头的<td>，让子表头和下方数据列属于同一个表格的列，宽度会自动匹配。

2. 清理冗余样式与无效标签

   • 删掉width:800px !important、margin-left:-10px这类硬写的强制样式，让表格根据内容自动适配（或统一给主表格设置width:100%）。
   • 移除无意义的空表格（比如用来占位的空<table>标签），简化结构。

修正后的代码示例 #

<table border="0" width="100%" class="table4 table3" style="border-left: 3px solid #fff; border-right: 3px solid #fff;">
  <!-- 表头区域 -->
  <thead>
    <tr>
      <td style="width:60px;" class="text-center">Sr. <br> No.</td>
      <td class="text-center">Paper Nomenclature</td>
      <td class="text-center" colspan="3">Marks</td>
    </tr>
    <tr>
      <td colspan="2"></td> <!-- 跨前两列，对应上方的序号和科目列 -->
      <td class="text-center">Secured</td>
      <td class="text-center">Pass</td>
      <td class="text-center">Total</td>
    </tr>
  </thead>
  <!-- 数据行区域 -->
  <tbody>
    <tr>
      <td style="width:60px;" class="text-center">2 .</td>
      <td>
        <table border="0" style="width:100%; border: 0;" class="table5">
          <tr>
            <td>Punjabi (Compulsory )</td>
            <td style="width:350px;">
              <table border="1" style="width:100%; height:40px;">
                <tr> 
                  <td>45</td><td>31</td><td>45</td><td>45</td><td>55</td> 
                </tr>
              </table>
            </td>
          </tr>
        </table>
      </td>
      <td class="text-center">221</td>
      <td class="text-center">35</td>
      <td class="text-center">100</td> 
    </tr>
  </tbody>
</table>

额外提示 #

如果需要固定Marks区域的总宽度，可以给三个子表头的<td>设置均分宽度，比如width: calc(220px / 3)，这样三列宽度会严格均分；尽量少用!important，优先用层级更高的CSS选择器来控制样式。

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