如何实现首行2列、第二行3列的HTML不规则表格布局

跨行不等分数列表格布局的核心是选对表格基准总列数：HTML表格的colspan跨列逻辑基于表格隐式基准列数计算，要让不同行的单元格划分对齐，基准总列数必须是各行单元格等分数的最小公倍数。2和3的最小公倍数是6，以此为基准编写代码即可实现目标效果。

原有代码问题 #

原有代码以4列为基准：

• 第一行2个单元格各设colspan="2"，总跨列数为4，刚好铺满整行，因此第一行2等宽的效果正常
• 第二行直接写了4个无跨列属性的单元格，自然会被等分为4份，无法实现3等宽的需求

可直接运行的正确代码 #

样式部分 #

table {
  border-collapse: collapse;
  width: 100%;
}
td {
  border: 1px solid #000;
  padding: 10px;
  min-height: 40px;
}

表格结构 #

<table>
  <!-- 第一行2等列：每个单元格跨3列，总跨列数3*2=6 铺满整行 -->
  <tr>
    <td colspan="3">第一行第一列</td>
    <td colspan="3">第一行第二列</td>
  </tr>
  <!-- 第二行3等列：每个单元格跨2列，总跨列数2*3=6 铺满整行 -->
  <tr>
    <td colspan="2">第二行第一列</td>
    <td colspan="2">第二行第二列</td>
    <td colspan="2">第二行第三列</td>
  </tr>
  <!-- 若需要和第一行一致的2等列行，复用第一行的跨列写法即可 -->
  <tr>
    <td colspan="3">第三行第一列</td>
    <td colspan="3">第三行第二列</td>
  </tr>
</table>

逻辑说明 #

• 基准总列数取6，是2、3的最小公倍数，保证不同行的跨列计算后列边界完全对齐，不会出现错位
• 2等分行的每个单元格设置colspan="3"，整行总跨列数为6，单元格自动等分为2份
• 3等分行的每个单元格设置colspan="2"，整行总跨列数为6，单元格自动等分为3份
• 样式中添加border-collapse: collapse是为了合并相邻单元格的重复边框，避免显示双边框问题

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