如何让含rowspan的动态内容表格单元格占满全部可用高度？

这个坑我之前踩过！表格的高度布局逻辑确实和宽度不一样，尤其是存在跨行（rowspan）单元格时，直接给<table>加height: 100%经常达不到“占满全部可用高度”的效果，下面给你几个实用的解决思路：

1. 用Flex布局强制填充父容器高度 #

这是最稳妥的方案，核心是给表格的父元素设置明确高度+Flex布局，让表格自动填充剩余空间：

<!-- 父容器设为视口高度，并用flex布局 -->
<div style="height: 100vh; display: flex; flex-direction: column; margin: 0;">
  <table style="flex: 1; width: 100%; border-collapse: collapse;">
    <tr>
      <td colspan="2" rowspan="2" style="border: 1px solid #ccc;">
        x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>...
      </td>
      <td style="border: 1px solid #ccc;">右侧单元格1</td>
    </tr>
    <tr>
      <td style="border: 1px solid #ccc;">右侧单元格2</td>
    </tr>
  </table>
</div>

原理：Flex布局会让子元素（表格）自动填满父容器的可用空间，不管跨行单元格的内容多长，都能保证表格占满高度。

2. 用Grid布局实现高度填充 #

和Flex思路类似，通过父容器的Grid布局约束表格高度：

<div style="height: 100vh; display: grid; margin: 0;">
  <table style="height: 100%; width: 100%; border-collapse: collapse;">
    <!-- 表格内容同上 -->
  </table>
</div>

注意：父容器必须有明确的高度值（比如100vh、固定像素值，或者继承上层元素的高度），否则height: 100%会因为没有参照基准而失效。

3. 针对跨行单元格的拉伸处理 #

如果希望跨行单元格也能自动拉伸填充表格高度，可以结合table-layout: fixed和单元格高度设置：

<table style="width: 100%; height: 100vh; table-layout: fixed; border-collapse: collapse;">
  <tr>
    <td colspan="2" rowspan="2" style="height: 100%; border: 1px solid #ccc;">
      x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>...
    </td>
    <td style="border: 1px solid #ccc;">右侧单元格1</td>
  </tr>
  <tr>
    <td style="border: 1px solid #ccc;">右侧单元格2</td>
  </tr>
</table>

table-layout: fixed会让表格优先遵循设置的宽高规则，避免内容撑开表格导致高度失效。

关键提醒 #

表格的height属性在CSS里本质是**“建议高度”**：如果表格内容的总高度超过设置值，表格会自动撑开。所以要实现“占满高度”，必须通过父容器的布局约束（Flex/Grid）或者给表格设置明确的固定高度（比如100vh），而不是单纯依赖height: 100%。

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