如何让<td>自动填充父元素<tr>的最大高度？

问题核心 #

当表格行高由内容更多的单元格（col2）动态决定时，直接给.col1设置height:100%无法让它占满整个单元格高度，导致flex布局的justify-content: space-between失效——因为flex容器仅适配自身内容高度，未继承单元格的完整高度。

解决方案1（推荐，无需修改HTML结构） #

通过调整表格和单元格样式，让height:100%能正确获取参考高度：

table {
  background-color: blue;
  table-layout: fixed; /* 固定表格布局，让单元格高度可继承 */
  border-collapse: collapse;
}

td {
  width: 100px;
  background-color: red;
  height: 100%; /* 让所有单元格继承行的高度 */
}

.col1 {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%; /* 现在能正确占满单元格高度 */
}

p {
  margin: 0;
}

解决方案2（无需修改表格布局） #

如果不想改动表格布局属性，可用绝对定位实现占满效果，需给.col1的内容套一层div：

修改后的CSS

td {
  width: 100px;
  background-color: red;
}

td.col1 {
  position: relative; /* 作为绝对定位的父容器 */
}

.col1 .flex-container {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

table {
  background-color: blue;
}

p {
  margin: 0;
}

修改后的HTML

<table>
  <tbody>
    <tr>
      <td class="col1">
        <div class="flex-container">
          <p>col1 content</p>
          <p>col1 content</p>
        </div>
      </td>
      <td class="col2">
        <p>col2 content</p>
        <p>col2 content</p>
        <p>col2 content</p>
        <p>col2 content</p>
      </td>
    </tr>
  </tbody>
</table>

原理说明 #

表格单元格高度默认是“自动计算”的，无明确数值参考，导致height:100%无法生效。方案1通过table-layout: fixed强制表格使用统一布局规则，让单元格能继承行高；方案2用绝对定位脱离文档流，直接占满父单元格空间，绕开了百分比高度的计算限制。

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