如何用CSS让嵌套HTML表格填满所在td的高度？

可以仅通过CSS实现嵌套表格填满父单元格高度的需求，无需依赖JavaScript计算高度。核心思路是调整承载嵌套表格的单元格布局方式，利用弹性布局（flex）让嵌套表格自动填充剩余空间。

实现步骤： #

• 给承载嵌套表格的<td>设置display: flex，使其子元素能借助flex特性填充空间
• 给嵌套表格添加flex: 1属性，让它自动填满父单元格的可用高度，同时保持宽度由自身内容决定的默认行为
• 主表格的行无需额外设置height:1px，第一列的动态高度会自动撑开整行

完整代码示例： #

<table border="1">
  <tr>
    <th>表头1</th>
    <th>表头2</th>
  </tr>
  <tr>
    <!-- 动态高度的内容单元格 -->
    <td>
      <div id="content_main" style="width:125px; height:350px; background-color: red;"></div>
    </td>
    <!-- 承载嵌套表格的单元格 -->
    <td style="display: flex;">
      <table border="1" style="flex: 1;">
        <tr>
          <td>嵌套行1</td>
        </tr>
        <tr>
          <td>嵌套行2</td>
        </tr>
        <tr>
          <td>嵌套行3</td>
        </tr>
      </table>
    </td>
  </tr>
</table>

原理说明： #

当<td>设置为display: flex后，会自动匹配第一列的高度；内部嵌套表格通过flex:1属性，会自动拉伸以填满父单元格的全部可用高度，同时宽度保持由内容决定的默认状态，完全满足需求。

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