HTML表格构建异常 单元格合并后布局显示错误问题求助

问题说明 #

• 初始构建的比例合理的复杂HTML表格在浏览器中打开时所有内容显示在同一行，因此简化示例排查问题
• 简化示例原本运行正常，执行两项修改后出现布局异常：
  1. 删除第三行的<td colspan="2">5</td>
  2. 将第二行的<td colspan="2">5</td>调整为<td colspan="2" rowspan="2">5</td>

异常原因 #

你的表格布局逻辑本身行列跨值计算是正确的，异常是浏览器自动表格布局算法的特性导致：

1. 你在第二行定义了<td colspan="3" rowspan="3">2</td>，这个单元格的跨列范围跨过了第一行合并单元格的边界（第一行是每2列合并为一个单元格），自动布局算法无法准确计算每列的默认宽度
2. 第三行是空<tr>，进一步干扰了浏览器的列占位计算，最终导致布局错位

修复方案 #

给表格提前定义列宽规则，强制浏览器按固定列宽渲染即可解决问题，修复后的代码如下：

<table border="1" style="table-layout: fixed;width: 100%;">
  <!-- 提前定义6列的宽度，避免自动计算错误 -->
  <colgroup>
    <col width="16.66%">
    <col width="16.66%">
    <col width="16.66%">
    <col width="16.66%">
    <col width="16.66%">
    <col width="16.66%">
  </colgroup>
  <!-- 1 -->
  <tr>
    <td colspan="2">1</td>
    <td colspan="2">3</td>
    <td colspan="2">5</td>
  </tr>
  <!-- 2 -->
  <tr>
    <td rowspan="2">1</td>
    <td colspan="3" rowspan="3">2</td>
    <td colspan="2" rowspan="2">5</td>
  </tr>
  <!-- 3 -->
  <tr></tr>
  <!-- 4 -->
  <tr>
    <td rowspan="2">1</td>
    <td>5</td>
    <td>6</td>
  </tr>
  <!-- 5 -->
  <tr>
    <td colspan="2">2</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
  <!-- 6 -->
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
  <!-- 7 -->
  <tr>
    <td>1</td>
    <td>2</td>
    <td colspan="4">3</td>
  </tr>
</table>

补充说明 #

如果不需要兼容特别旧的浏览器，也可以用CSS Grid实现复杂网格布局，逻辑比HTML原生表格的合并单元格更清晰，不容易出现错位问题。

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