本文介绍在未知子表格高度的情况下，使多个嵌套 `
| ` 中等高对齐的实用方案，重点说明为何嵌套表格难以实现垂直拉伸，并推荐语义更清晰、控制力更强的单层表格 + `rowspan` 替代方案。 HTML 表格的默认渲染行为决定了：嵌套在 <td> 中的子 <table> 不会自动拉伸以匹配父 <td> 的高度——因为 <td> 的高度由其内容（即子表格）决定，而非相反。这导致当同行中某个子表格行数较多时，其他较短的子表格仍保持自身内容高度，上下留白，无法“对齐底边”或“撑满单元格”。 你尝试的 table-layout: fixed 和 rowspan 未生效，根本原因在于：
✅ 真正可靠且语义正确的解法是：避免嵌套表格，改用单层 <table> 配合 rowspan 实现逻辑分组与视觉对齐。 以下是一个可直接运行的优化示例，完全复现原布局意图（左侧固定栏、中间主数据区、右侧固定栏），并确保所有行单元格严格等高： <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Equal-Height Table Cells</title>
<style>
table, th, td {
border: 1px solid #333;
border-collapse: collapse;
padding: 6px 8px;
vertical-align: top;
}
th, td {
width: 14ch;
min-height: 2em; /* 提供基础高度保障 */
}
/* 可选：为不同区域添加视觉区分 */
.side-col { background-color: #f9f9f9; }
</style>
</head>
<body>
<table>
<!-- 表头行 -->
<tr>
<th></th>
<th>1</th>
<th></th>
</tr>
<!-- 数据行：使用 rowspan 实现左右侧“固定高度区块” -->
<tr>
<td class="side-col" rowspan="4">T1<br>T1</td>
<td>test2</td>
<td class="side-col" rowspan="4">T3<br>T3</td>
</tr>
<tr>
<td>test2</td>
</tr>
<tr>
<td>test2</td>
</tr>
<tr>
<td>test2</td>
</tr>
</table>
</body>
</html>? 关键要点说明：
⚠️ 注意：若业务逻辑强制要求动态生成嵌套结构（如遗留系统集成），可考虑 JavaScript 动态读取最高子表高度并统一设置 style.height，但该方案违背 CSS 原生流式布局原则，应作为最后手段。 总结：表格的高度一致性问题，本质是 HTML 表格模型的固有限制；绕过限制的最佳实践不是“强行拉伸”，而是重构为语义正确、浏览器原生支持的单层结构。 使用 rowspan/colspan 不仅解决对齐问题，更提升可访问性与性能。 |
