HTML表格Execution标题下End旁出现多余单元格如何处理？

问题原因 #

• 你在colspan="2"的父单元格内嵌套了两个独立的表格，没有把EXECUTION标题和下方的START/END放在同一个嵌套表格中，布局逻辑错误
• 嵌套表格被错误设置了width: 25%，两个表格总宽度仅占父单元格的一半，剩余空白区域就显示为类似多余单元格的效果

修正代码 #

把原来的两个独立嵌套表格合并为一个，将EXECUTION标题所在单元格设置colspan="2"跨两列展示，和下方的START/END两列对齐：

<table style="float: center;border:2px;font-size:20px;color:white;border-collapse: collapse;border-spacing: 3;width: 25%;">
  <tr>
    <td> PC </td>
    <td> INSTRUCTION </td>
    <td> ISSUED </td>
    <td colspan="2">
      <table style="font-size:20px;color:white;border-collapse: collapse;border-spacing: 3;width: 100%;">
        <tr><td colspan="2" align="center">EXECUTION</td></tr>
        <tr><td>START</td><td>END</td></tr>
      </table>
    </td>
    <td> WRITTEN </td>
  </tr>
</table>

关键调整点 #

• 嵌套表格宽度改为width: 100%，完全填充父单元格，避免出现空白区域
• EXECUTION单元格加colspan="2"，和下方的START、END两列宽度对齐，不会出现错位
• 移除了多余的第二个嵌套表格，统一用一个嵌套表格管理EXECUTION相关的内容，布局逻辑更清晰

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