HTML表格rowspan属性未按预期生效问题求助

问题原因 #

你给six和first都设置了rowspan="2"，但前者只占用1行，核心问题是表格行结构不完整：

• first在第一行，后面紧跟完整的第二行，浏览器能自动分配两行高度让它跨占；
• six在第三行，后面没有对应的第四行来支撑rowspan=2的空间，浏览器只能渲染现有行的高度。

修正代码 #

只需在six所在行的下方添加一行（哪怕是空行），就能让six和seven正常跨2行：

CSS（保持不变） #

table { border-collapse: collapse }
td, th { border: solid thin black }

修正后的HTML #

<table>
  <tr>
    <td rowspan="2">first</td>
    <td rowspan="4" colspan="9">second</td>
    <td colspan="3">third</td>
  </tr>
  <tr>
    <td colspan="2">four</td>
    <td>five</td>
  </tr>
  <tr>
    <td rowspan="2">six</td>
    <td colspan="3" rowspan="2">seven</td>
  </tr>
  <!-- 添加此行来支撑rowspan的第二行空间 -->
  <tr></tr>
</table>

原理说明 #

单元格的rowspan属性定义的是跨占的行数，浏览器需要表格中存在足够的行来实现这个跨占逻辑。如果没有对应数量的行，浏览器会忽略超出的跨占设置，仅显示当前行的高度。

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