的高度 " />

本文介绍在未知内容高度的情况下，使嵌套 `

` 自动撑满其父 `

` 高度的可靠方案，重点指出传统嵌套表格结构的局限性，并推荐语义更清晰、布局更可控的单层表格 + `rowspan` 替代方案。

在 HTML 布局中，嵌套表格（table-in-td）本质上不具备“等高对齐”能力。这是因为

的高度由其行内内容自然撑开，而内部 默认为 display: table，其高度独立计算，不会反向驱动父 设置 height 或 min-height），在无 CSS 高度干预时依然无法触发等高填充。

✅ 真正可行的解决方案是：放弃嵌套表格，改用单层

拉伸；更关键的是，同级	之间不会自动对齐高度——即使一个	因内容多而变高，其他	仍保持最小内容高度，导致视觉上参差不齐。 你尝试的 table-layout: fixed 和 rowspan 无效，根本原因在于： table-layout: fixed 仅控制列宽计算方式，不影响行高或单元格垂直拉伸行为； rowspan 若未配合明确的高度约束（如父

+ 合理 rowspan 结构。这不仅语义正确、兼容性好，还能天然实现“列内单元格纵向对齐”。

以下是一个可直接运行的优化示例：

html-ppt-to-pdf

将使用 `

` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。

下载

  <meta charset="UTF-8"><title>Equal-Height Columns via rowspan</title><style>
    table, th, td {
      border: 1px solid #333;
      border-collapse: collapse;
      padding: 6px 10px;
      vertical-align: top;
    }
    th, td {
      width: 14ch;
      min-height: 2em; /* 提供基础高度保障 */
    }
    /* 可选：让内容居中显示 */
    td:first-child, td:last-child {
      text-align: center;
      background-color: #f5f5f5;
    }
  </style>

	Column Header
T1 T1	test2 test2 test2 test2	T3 T3

? 关键要点说明：

• rowspan="2" 让左右两侧的“标签单元格”跨越两行，与中间内容区的两行物理结构对齐；
• 中间

内容可自由换行（如使用
或块级元素），其高度会自然撑开整行，而 rowspan 单元格随之等高延展；

所有单元格默认 vertical-align: top（已显式声明），确保内容顶部对齐，避免因默认基线对齐产生的错位；

添加 min-height 是防御性设计，防止极简内容下高度塌陷。

⚠️ 注意事项：

• 不要滥用嵌套表格实现布局——它已过时，且难以响应式、无障碍支持差；
• 若业务逻辑强制要求动态生成嵌套结构（如遗留系统集成），可考虑用 JavaScript 动态读取最高 的 offsetHeight，再统一设置其他
  的 min-height，但此方案脆弱且影响性能，应作为最后手段；
• 现代项目强烈建议迁移到 Flexbox 或 Grid：例如用 display: grid; grid-template-columns: auto 1fr auto; 替代三列表格，配合 align-items: stretch 实现真正的等高容器。

总之，“让子表格填满父 td”本质是个伪需求——问题不在拉伸技巧，而在结构设计本身。用正确的 HTML 结构（单表 + rowspan）替代错误的嵌套，才是简洁、健壮、可持续的解法。