如何用单个HTML表格实现首行仅1列其余行多列，解决首行多出额外列问题

问题根因 #

你遇到的首行多出空白列的问题，是因为未给跨列的首行单元格添加colspan属性。HTML表格渲染时会自动以列数最多的行作为基准列数，你下方行有2列，首行仅定义1个单元格但未声明跨列，浏览器就会自动补出第二个空白单元格对齐总列数。

实现代码 #

仅需给首行单元格加上colspan="2"即可用单个表格实现需求：

<table style="width: 100%; border: 1px solid #000; border-collapse: collapse;">
  <!-- 首行跨2列占满整行 -->
  <tr>
    <td colspan="2" style="border: 1px solid #000; padding: 8px;">顶部通栏内容</td>
  </tr>
  <tr>
    <td style="border: 1px solid #000; padding: 8px;">左侧列内容</td>
    <td style="border: 1px solid #000; padding: 8px;">右侧列内容</td>
  </tr>
  <tr>
    <td style="border: 1px solid #000; padding: 8px;">左侧列内容</td>
    <td style="border: 1px solid #000; padding: 8px;">右侧列内容</td>
  </tr>
</table>

注意事项 #

• colspan取值需要和表格的最大列数保持一致，若你后续调整下方为3列，对应将colspan值改为3即可
• 添加border-collapse: collapse可避免单元格边框重复显示，视觉效果更规整
• 所有不规则单元格布局都可以通过colspan（跨列）、rowspan（跨行）属性实现，不需要拆分多个表格拼接

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