本文详解如何通过 CSS Flex 布局与容器约束，使并排的嵌套 HTML 表格具有完全一致的高度，并支持独立垂直滚动，解决 height: 100% 失效、嵌套表格尺寸失控等常见问题。
本文详解如何通过 css flex 布局与容器约束，使并排的嵌套 html 表格具有完全一致的高度，并支持独立垂直滚动，解决 `height: 100%` 失效、嵌套表格尺寸失控等常见问题。
在实际 Web 开发中，尤其是处理多列对比型数据展示（如左右并列的 WEEE 分类表与国家代码表）时，开发者常遇到：即使为两个
<div class="table-pair">
<div class="table-wrapper">
<h3>左侧表格：WEEE 类别</h3>
<div class="scrollable-table">
<table border="1" width="100%"><!-- 原始 WEEE 表格内容 --></table>
</div>
</div>
<div class="table-wrapper">
<h3>右侧表格：国家代码</h3>
<div class="scrollable-table">
<table border="1" width="100%"><!-- 原始国家代码表格内容 --></table>
</div>
</div>
</div>
2. 应用精准 CSS 控制
.table-pair {
display: flex;
gap: 16px; /* 两表间距 */
width: 100%;
}
.table-wrapper {
flex: 1; /* 等宽自适应 */
min-width: 0; /* 防止 flex 项溢出 */
}
.scrollable-table {
height: 200px; /* 统一可视高度，单位建议 px 或 rem */
overflow-y: auto;
border: 1px solid #ccc;
border-radius: 4px;
}
/* 关键：确保内部 table 占满容器高度（仅当需撑满时）*/
.scrollable-table table {
width: 100%;
table-layout: fixed; /* 防止列宽被长内容撑开 */
}
/* 可选：冻结表头（需 tbody 配合）*/
.scrollable-table thead th {
position: sticky;
top: 0;
background: #f5f5f5;
z-index: 10;
}
⚠️ 注意事项与避坑指南
-
height: 100% 无效的根本原因：它依赖父容器有确定的高度值（非 auto 或 min-height）。你的原始 是无效 HTML 属性（应改用 style="height:100px"），且硬编码像素值缺乏弹性。
- 嵌套表格慎用 width='100%' / height='100%'：HTML 属性 height 已废弃，CSS 中 height: 100% 在 display: table-cell 或无高度上下文时必然失败。优先用 flex 或 grid 替代嵌套布局。
- 滚动兼容性：overflow-y: auto 在 Safari 中对
直接生效可能不稳定，务必包裹在
中（即 .scrollable-table），这是最可靠方案。- 响应式增强：可将 200px 替换为 min(200px, 30vh)，兼顾小屏设备；或配合媒体查询动态调整：
@media (max-width: 768px) { .table-pair { flex-direction: column; } .scrollable-table { height: 150px; } }✅ 最终效果验证要点
- 两表格容器高度严格相等（可通过 DevTools 检查 .table-wrapper 计算高度）；
- 各自内容超长时，仅内部滚动，不影响整体布局；
- 表头在滚动时保持固定（sticky 生效）；
- 在 Chrome/Firefox/Edge/Safari 中表现一致。
通过此方案，你不再依赖不可靠的百分比继承或废弃属性，而是以容器驱动、语义清晰、可维护性强的方式，真正实现“并排表格高度一致 + 独立滚动”的专业级 UI 效果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
