本文详解如何通过 CSS Flex 布局与容器约束，使并排的嵌套 HTML 表格具有完全一致的高度，并支持独立垂直滚动，解决 height: 100% 失效、嵌套表格尺寸失控等常见问题。
本文详解如何通过 css flex 布局与容器约束，使并排的嵌套 html 表格具有完全一致的高度，并支持独立垂直滚动，解决 `height: 100%` 失效、嵌套表格尺寸失控等常见问题。
在实际 Web 开发中，尤其是处理多列对比型数据展示（如左右并列的 WEEE 分类表与国家代码表）时，开发者常遇到：即使为两个 <table> 设置了相同的 height 或 vh，它们仍因内容量差异、父容器未设高度、或嵌套层级过深而高度不一致；更严重的是，.tableScroll { height: 100% } 在无明确高度上下文的嵌套结构中会失效——因为百分比高度要求所有祖先元素（包括 <html>、<body> 和直接父容器）均需显式定义 height，而你的代码中仅包裹了 <div height='100px'>（该 HTML 属性无效，且值固定无法响应式），导致子级 100% 无基准可依。
✅ 正确解法：使用现代 Flex 布局 + 显式容器高度 + min-height 容错机制
以下为推荐的结构化实现方案：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
1. 重构 HTML 结构，剥离冗余嵌套
避免深层嵌套（如 <div><table><tr><td><table>…</table></td></tr></table></div>），改用语义清晰的容器包裹：
立即学习“前端免费学习笔记（深入）”；
<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）。你的原始 <div height='100px'> 是无效 HTML 属性（应改用 style="height:100px"），且硬编码像素值缺乏弹性。
- 嵌套表格慎用 width='100%' / height='100%'：HTML 属性 height 已废弃，CSS 中 height: 100% 在 display: table-cell 或无高度上下文时必然失败。优先用 flex 或 grid 替代嵌套布局。
- 滚动兼容性：overflow-y: auto 在 Safari 中对 <table> 直接生效可能不稳定，务必包裹在 <div> 中（即 .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 效果。
