本文详解如何通过 CSS 容器布局（Flexbox）+ 显式高度 + overflow-y: auto，精准控制多个并排 HTML 表格的等高与独立滚动，解决嵌套表格中高度不一致、100% 高度失效等常见问题。
本文详解如何通过 css 容器布局（flexbox）+ 显式高度 + `overflow-y: auto`，精准控制多个并排 html 表格的等高与独立滚动，解决嵌套表格中高度不一致、100% 高度失效等常见问题。
在实际 Web 开发中，尤其是处理多列对比型数据展示（如左右并列的“源数据”与“目标映射”表），常需确保两个或多个 <table> 元素视觉高度完全一致且各自可独立垂直滚动。然而，直接对 <table> 设置 height: 100% 或 vh 往往无效——这是因为表格元素默认为 display: table，其高度计算依赖于内容，且不继承父容器的百分比高度（除非父级具有明确高度且非 auto）。此外，嵌套表格结构（如题中多层 <div><table><table>…）会进一步加剧高度塌陷与继承中断。
✅ 正确解法：用 Flexbox 容器包裹表格，并为表格设置固定/约束高度
以下为推荐实现方案：
1. 结构优化：使用语义化容器替代无样式 <div>
避免依赖 width='80%' 等过时 HTML 属性，改用现代 CSS 控制布局：
立即学习“前端免费学习笔记（深入）”；
<div class="table-pair">
<table class="scrollable-table">
<!-- 左侧表格内容 -->
</table>
<table class="scrollable-table">
<!-- 右侧表格内容 -->
</table>
</div>2. 核心 CSS：Flex 布局 + 固定高度 + 滚动封装
.table-pair {
display: flex;
gap: 16px; /* 可选：添加间距 */
width: 100%;
}
.scrollable-table {
flex: 1; /* 等宽自适应 */
min-width: 0; /* 防止 flex 项溢出（关键！）*/
height: 300px; /* ✅ 必须设具体高度（px/rem/vh），不可用 % */
border-collapse: collapse;
table-layout: fixed; /* 保证列宽按设定值渲染 */
}
/* 滚动区域：将 tbody 包裹在带 overflow 的容器中 */
.scrollable-table > tbody {
display: block;
height: calc(100% - 40px); /* 减去 thead 高度（约 40px）*/
overflow-y: auto;
}
.scrollable-table > thead,
.scrollable-table > tbody > tr {
display: table;
width: 100%;
table-layout: fixed;
}
/* 可选：冻结表头（需配合 JS 或更优方案如 position: sticky）*/
.scrollable-table thead th {
position: sticky;
top: 0;
background: #f5f5f5;
z-index: 1;
}⚠️ 注意事项：
- 不要给 <table> 直接设 overflow：<table> 元素不支持 overflow，必须包裹一层 <div class="tableScroll"> 或改用 tbody 作为滚动容器（如上例）；
- height: 100% 失效的根本原因：父容器（如 <div>）若未设显式高度，子元素的百分比高度无计算基准；因此推荐统一使用 px / rem / vh 等绝对单位；
- 嵌套表格需逐层重置：题中多层 <table> 嵌套易导致高度传递断裂，建议扁平化结构，或为每层嵌套容器（如 <div>）单独设置 height 和 overflow;
- table-layout: fixed 是关键：确保列宽严格按 width 属性生效，避免内容撑开破坏等高布局。
3. 替代方案：使用 CSS Grid（更简洁）
若兼容性允许（IE 除外），Grid 提供更直观的等高控制：
.table-pair {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
height: 300px; /* 父容器设高，子项 inherit */
}
.scrollable-table {
height: 100%;
overflow-y: auto;
}总结
要实现并排表格“高度一致 + 独立滚动”，核心在于：
? 放弃对 <table> 直接设 height: 100%；
? 用 Flex/Grid 容器提供明确高度上下文；
? 将滚动行为施加于 tbody 或外层 <div>，而非 <table> 自身；
? 启用 table-layout: fixed 保障列宽可控，防止内容干扰高度一致性。
该方案兼容所有现代浏览器（Chrome/Firefox/Safari/Edge），无需 JavaScript，语义清晰，维护性强，是响应式数据表格布局的最佳实践之一。
