HTML表格相邻列跨行合并后渲染异常问题排查

问题根源 #

你遇到的核心问题在于HTML表格布局引擎对双向跨行合并的处理逻辑限制。当表格同时存在左侧单元格向下跨行（{2,1}覆盖第2、3行）和右侧单元格向下跨行（{3,2}覆盖第3、4行）时，第3行仅包含一个跨2行的右侧单元格，第4行仅包含一个左侧单元格——这种情况下，浏览器无法正确识别两行的列对应关系，会错误地将两行单元格挤压到同一视觉行中。

你提到“每行单元格数量（含跨行合并）一致”，但实际上表格布局的核心是每行的“单元格占位”需与总列数匹配。异常代码中：

• 第3行只有1个对应第2列的跨行单元格，缺少第1列的占位标记，浏览器无法判断该行的布局边界；
• 第4行的第1列单元格与第3行的跨行右侧单元格形成交叉占位，布局引擎因此混淆了两行的高度分配。

规范解决方案（无需额外隐藏列） #

不需要添加新的隐藏列，只需在第3行中添加一个空的单元格占位，用来对应被上方跨行单元格占据的第1列，让每行的占位数量与表格总列数（2列）匹配，浏览器就能正常渲染：

<!DOCTYPE html>
<html>
  <head>
    <style>
      table {
        border-spacing: 0;
      }
      td {
        border: 1px black solid;
        width: 300px;
        height: 100px;
        background-color: aqua;
      }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <!-- Row 1 -->
        <td> Data cells {1, 1} </td>
        <td> Data cells {1, 2} </td>
      </tr>
      <tr>
        <!-- Row 2 -->
        <td rowspan="2"> Data cells {2, 1} and {3, 1} rowspan="2" </td>
        <td> Data cells {2, 2} </td>
      </tr>
      <tr>
        <!-- Row 3：添加空td占位第1列 -->
        <td></td>
        <td style="background-color:lightpink;" rowspan="2"> 
          Data cells {3, 2} and {4, 2}  rowspan="2"
        </td>
      </tr>
      <tr>
        <!-- Row 4 -->
        <td> Data cells {4, 1} </td>
      </tr>
    </table>
  </body>
</html>

这个空单元格仅作为布局占位，不需要特殊样式；如果担心边框或背景影响视觉，可给它添加border: none; background: transparent;的样式，完全不干扰页面效果。

关于隐藏列方案的取舍 #

如果已经用隐藏列方案实现了需求，也可以继续使用，但从HTML规范和代码简洁性来看，添加对应列的空占位单元格是更合理的选择——它避免了冗余的列结构，更贴合表格布局的核心逻辑。

内容的提问来源于stack exchange，提问作者Humberto Fioravante Ferro