本文详解如何通过 CSS Flex 布局与容器约束，精准统一相邻 HTML 表格的显示高度、实现等高对齐，并确保各自内容区域独立可滚动，彻底解决嵌套表格中高度不一致、height: 100% 失效等常见问题。

本文详解如何通过 css flex 布局与容器约束，精准统一相邻 html 表格的显示高度、实现等高对齐，并确保各自内容区域独立可滚动，彻底解决嵌套表格中高度不一致、`height: 100%` 失效等常见问题。

在实际 Web 开发中，尤其是处理复杂表单或双栏比对式数据展示（如左右并列的物料清单、申报项对照表）时，开发者常需让两个或多个

元素视觉高度完全一致，同时各自内部支持垂直滚动——但直接对 设置 height: 100% 或 vh 往往无效，根本原因在于：表格元素默认为 display: table，不具备弹性盒模型的尺寸继承能力；且其子元素（如 tbody）无法直接响应父级高度约束，导致 overflow-y: auto 无法触发滚动。

✅ 正确解法是：剥离表格自身的高度控制职责，改由外层容器统一管理布局与尺寸，再通过嵌套结构隔离滚动上下文。

HTML Text Extract

从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

下载

✅ 推荐实现方案（语义清晰 + 兼容性强）

<style>
  /* 外层容器：启用 Flex 布局，强制等高对齐 */
  .table-container {
    display: flex;
    gap: 16px; /* 可选间距 */
    width: 100%;
  }

  /* 单个表格容器：固定高度 + flex 包裹，确保子 table 占满可用空间 */
  .table-wrapper {
    flex: 1;
    height: 300px; /* 统一设定目标高度（如 300px）*/
    display: flex;
    flex-direction: column;
  }

  /* 表格本身：设为 flex: 1，使其撑满 wrapper 高度 */
  .table-wrapper > table {
    flex: 1;
    border-collapse: collapse;
    width: 100%;
  }

  /* 滚动区域：仅包裹 tbody（或自定义 scroll 区域），避免整表滚动 */
  .scrollable-body {
    flex: 1;
    overflow-y: auto;
    max-height: calc(100% - 40px); /* 预留 thead 高度（约 40px）*/
  }

  /* 固定表头样式（可选增强） */
  .scrollable-body thead th {
    position: sticky;
    top: 0;
    background: #f5f5f5;
    z-index: 1;
  }
</style><!-- 使用示例 --><div class="table-container">
  <!-- 左侧表格 -->
  <div class="table-wrapper">
    <table>
<thead><tr>
<th>项目</th>
<th>值</th>
</tr></thead>
<tbody class="scrollable-body">
<tr>
<td>Recupel 4.3</td>
<td>Iets me elektriek</td>
</tr>
<tr>
<td>Recupel 4.3</td>
<td>Iets me elektriek</td>
</tr>
<!-- 更多行... -->
</tbody>
</table>
</div>

  <!-- 右侧表格 -->
  <div class="table-wrapper">
    <table>
<thead><tr>
<th>Land</th>
<th>Code</th>
<th>Omschrijving</th>
<th> </th>
</tr></thead>
<tbody class="scrollable-body">
<tr>
<td>BE</td>
<td>Recupel 4.63</td>
<td>Electronische dingens</td>
<td>X</td>
</tr>
<tr>
<td>BE</td>
<td>Recupel 24.63</td>
<td>Electronische dingens</td>
<td>X</td>
</tr>
<!-- 更多行... -->
</tbody>
</table>
</div>
</div>

⚠️ 关键注意事项

• 勿直接给

设 height + overflow：表格不是块级弹性元素，height: 100% 在无明确高度祖先时会失效；

避免过度嵌套

包裹

：你原代码中

是无效 HTML 属性（应使用 style="height:100px"），且多层嵌套易破坏盒模型计算；

sticky 表头需配合 thead + tbody 结构：仅当 tbody 设置 overflow 且 thead 位于其外部时，position: sticky 才能正常工作；

单位建议优先使用 px 或 rem：vh 在响应式场景下易受视口变化干扰；% 需严格保证所有父级有明确高度，调试成本高；

兼容性提示：上述 Flex + sticky 方案支持 Chrome 56+、Firefox 59+、Edge 16+，如需支持 IE11，请改用 JavaScript 动态计算高度或 display: table-cell 替代。

✅ 总结一句话实践原则

“容器定高、Flex 布局保等高，wrapper 包 table、scrollable-body 包 tbody” —— 三层结构分工明确，既保障视觉一致性，又赋予每个表格独立的滚动能力，是处理多表格对齐场景的鲁棒方案。