HTML表格rowspan高度兼容问题：Chrome显示异常Firefox正常

我之前也碰到过类似的跨浏览器表格渲染坑，Chrome和Firefox对rowspan的布局计算确实存在差异——尤其是当rowspan所在的行只有这一个单元格时，Chrome很容易出现高度计算错误，而Firefox的布局逻辑会自动适配后续行的总高度，所以显示正常。

问题原因拆解 #

你的表格里，设置了rowspan="3"的单元格所在的第一行（比如<tr><td rowspan="3">Hello World</td></tr>）只有这一个单元格，但后续两行却有13个单元格。Chrome的布局引擎在这种情况下，无法正确关联rowspan单元格的高度与后续多行的总高度，导致高度显示错位；而Firefox会自动将rowspan单元格的高度匹配为后续所有行的高度总和，所以显示正常。

可行的解决方案 #

方案1：补全rowspan所在行的空单元格

给包含rowspan的行添加与后续行数量一致的空<td>元素，让浏览器能正确识别表格的列结构，从而准确计算rowspan的高度。

修改后的代码示例（以第一个rowspan行为例）：

<tr>
  <td rowspan="3"> Hello World </td>
  <!-- 补充13个空td，和后续行的列数保持一致 -->
  <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>

同样，第二个rowspan所在的行也需要补充对应的空<td>。

方案2：强制表格布局为fixed模式

在CSS中给表格添加table-layout: fixed，让浏览器按照固定布局规则渲染表格，避免自动布局带来的跨浏览器差异：

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
  table-layout: fixed; /* 添加这一行 */
}

这个方法不需要修改HTML结构，适合不想调整表格行结构的场景。

方案3：设置单元格垂直对齐

给rowspan的单元格添加vertical-align: top（或其他对齐方式），有时候能触发Chrome重新计算高度：

td[rowspan] {
  vertical-align: top;
}

验证效果 #

以上三种方法都能解决Chrome中的高度异常问题，其中方案1是最稳妥的——它从表格结构上保证了列数的一致性，彻底避免了浏览器渲染逻辑的差异。

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