如何让td内的div随被撑开的行高自动扩展

表格单元格设置固定高度后，若同行某单元格被内部高元素撑开，另一单元格里的div设置height:100%无法继承单元格的实际高度——这是因为表格的高度计算逻辑和普通块级元素不同，100%在这里无法正确识别单元格的实际渲染高度。以下是几种可行的解决办法：

方案1：将单元格设为flex容器 #

把td的display设为flex，内部div会自动拉伸填满单元格高度，无需额外设置height:100%。

table,
th,
td {
  border: 4px solid black;
  border-collapse: collapse;
}

th,
td {
  background-color: orange;
  height: 30px;
  padding: 0px;
  display: flex; /* 核心：将单元格转为flex容器 */
}

<table>
  <tr>
    <td>
      <div style="height:50px; background:green">Tall element</div>
    </td>
    <td>
      <div style="background:yellow">Should expand</div>
    </td>
  </tr>
  <tr>
    <td>Row 2, Column 1</td>
    <td>Row 2, Column 2</td>
  </tr>
</table>

flex容器的子元素默认会沿交叉轴拉伸，因此div会自动匹配单元格的实际高度。

方案2：用绝对定位让div填满单元格 #

给td设置position:relative，内部div设为绝对定位并拉伸至填满整个单元格。

table,
th,
td {
  border: 4px solid black;
  border-collapse: collapse;
}

th,
td {
  background-color: orange;
  height: 30px;
  padding: 0px;
  position: relative; /* 核心：让单元格成为绝对定位的参考容器 */
}

<table>
  <tr>
    <td>
      <div style="height:50px; background:green">Tall element</div>
    </td>
    <td>
      <div style="background:yellow; position:absolute; top:0; bottom:0; left:0; right:0;">Should expand</div>
    </td>
  </tr>
  <tr>
    <td>Row 2, Column 1</td>
    <td>Row 2, Column 2</td>
  </tr>
</table>

绝对定位元素会基于最近的非static定位父元素（这里是td）进行定位，设置top:0和bottom:0会强制元素高度与父元素一致。

方案3：用CSS Grid模拟表格布局（更灵活） #

若无需严格使用table标签，用Grid布局替代表格，高度继承逻辑更直观，height:100%可正常生效。

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 两列等宽，模拟表格结构 */
  border: 4px solid black;
}

.grid-item {
  border: 4px solid black;
  background-color: orange;
  min-height: 30px; /* 模拟原表格的固定高度 */
  padding: 0;
}

<div class="grid-container">
  <div class="grid-item">
    <div style="height:50px; background:green">Tall element</div>
  </div>
  <div class="grid-item">
    <div style="background:yellow; height:100%">Should expand</div>
  </div>
  <div class="grid-item">Row 2, Column 1</div>
  <div class="grid-item">Row 2, Column 2</div>
</div>

Grid布局中，子元素的height:100%会正确继承父元素的实际高度，适配性更强。

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