如何让<table>拉伸以填满所在<td>的高度？

当外层表格中嵌套多个内层表格时，若某一内层表格高度大于其他，其余表格所在的单元格无法自动拉伸填补空隙——这是因为嵌套表格作为独立元素，默认仅适配自身内容高度，不会继承外层单元格的高度。以下是两种可行的解决方法：

方法一：基于Flex布局改造现有表格结构 #

通过CSS将外层表格的单元格转为Flex容器，强制内部嵌套表格填满整个单元格高度，并让表格行自动均分空间：

修改后的CSS代码 #

table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
  padding: 0;
  margin: 0;
}

th {
  width: 14ch;
}

/* 外层表格的单元格设为Flex容器 */
#outer td {
  display: flex;
}

/* 嵌套表格占满Flex容器高度 */
#outer td table {
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
}

/* 表格行均分高度 */
#outer td table tr {
  flex: 1;
  display: flex;
}

/* 单元格占满行高度，可选：让内容居中 */
#outer td table tr td {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

说明 #

• 外层单元格转为Flex容器后，内部嵌套表格会被强制拉伸至单元格的实际高度（由最高的内层表格决定）。
• 嵌套表格使用Flex列布局，让行自动均分高度，确保内容少的表格也能填满整个单元格。

方法二：用CSS Grid替代外层表格 #

如果页面结构允许，直接用Grid布局替换外层表格，Grid会自动统一所有列的高度，内部表格只需设置height:100%即可填充：

修改后的完整代码 #

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Stretch Tables</title>
  <style>
    .grid-container {
      display: grid;
      grid-template-columns: 1ch 14ch 1ch;
      border: 1px solid black;
    }

    .grid-item {
      border: 1px solid black;
    }

    .grid-item table {
      width: 100%;
      height: 100%;
      border-collapse: collapse;
      display: flex;
      flex-direction: column;
    }

    .grid-item table tr {
      flex: 1;
      display: flex;
    }

    .grid-item table tr td {
      flex: 1;
      border: 1px solid black;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  </style>
</head>
<body>
  <div class="grid-container">
    <div class="grid-item">
      <table>
        <tr><td>T1</td></tr>
        <tr><td>T1</td></tr>
      </table>
    </div>
    <div class="grid-item">
      <table id="col1">
        <tr><td>test2</td></tr>
        <tr><td>test2</td></tr>
        <tr><td>test2</td></tr>
        <tr><td>test2</td></tr>
      </table>
    </div>
    <div class="grid-item">
      <table>
        <tr><td>T3</td></tr>
        <tr><td>T3</td></tr>
      </table>
    </div>
  </div>
</body>
</html>

说明 #

• Grid布局会自动让所有列的高度匹配最高列的高度，无需手动设置。
• 内部表格通过height:100%和Flex布局，确保行和单元格填满整个容器空间。

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