如何用纯CSS让带rowspan的单元格内div铺满整高

要让带有rowspan属性的单元格内部的div元素铺满单元格的完整高度，只需调整CSS布局即可实现，无需额外JavaScript。

修改后的CSS代码 #

td {
  border: 1px solid gray;
  /* 将单元格设为flex容器，便于子元素填充空间 */
  display: flex;
}

td[rowspan] {
  /* 针对跨行单元格，设置垂直方向的flex布局 */
  flex-direction: column;
}

div {
  padding: 5px;
  background: gray;
  /* 让div自动填充单元格的可用空间 */
  flex: 1;
}

对应的HTML代码 #

<table>
    <tr>
    <td rowspan='3'>
      <div>cell 1</div>
    </td>
    <td>cell 2</td>
  </tr>
  <tr>
    <td>cell 3</td>
  </tr>
  <tr>
    <td>cell 4</td>
  </tr>
</table>

实现原理 #

• 把<td>设置为display: flex，改变单元格内部的布局规则，让子元素能利用flex特性填充空间
• 给带rowspan的单元格添加flex-direction: column，确保内部元素沿垂直方向排布并占满高度
• 为div设置flex: 1，使其自动填充单元格的所有可用空间，从而完全匹配跨行单元格的高度

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