如何设置HTML表格的自适应高度？百分比单位控制垂直布局-html教程-PHP中文网

height: 100% 在 table 上无效是因为 table 默认不继承父容器高度，需 html、body 及所有中间父容器显式设 height；table 本身设 height: 100% 后，tr 按比例分配但内容超长仍会撑破；应将 min-height/max-height + overflow-y 用于 table 的直接父容器而非 table 自身。

如何设置html表格的自适应高度？百分比单位控制垂直布局

height: 100% 在 table 上为什么无效？

因为 table 默认是「包裹内容」的块级元素，不继承父容器高度；即使父级设了 height: 100%，table 仍按内容撑开。真正生效的前提是：从 html → body → 所有中间父容器（包括直接包裹 table 的 div）都显式声明 height 或 min-height。

常见错误现象：table { height: 100% } 没反应、表格被压扁、或只在部分浏览器生效（如 Chrome 表现正常，Firefox 完全忽略）。

必须写 html, body { height: 100%; }，否则 100% 无计算基准
包裹 table 的最近一层 div 不能是 display: block 默认流布局——它需要明确高度，比如 height: 400px 或 min-height: 300px
table 自身设 height: 100% 后，内部 tr 会按比例分配，但若某行内容超长，仍会撑破——这不是 bug，而是 CSS 表格渲染规则

用 min-height + max-height 控制弹性范围

固定高度太僵硬，纯 auto 又难控制下限。更实用的是组合使用 min-height 和 max-height，让表格在内容少时保持最小可用空间，内容多时允许滚动。

关键点在于：这个组合必须作用于 table 的**直接父容器**（通常是 div），而不是 table 本身——因为 table 不支持 max-height + overflow 的剪裁行为。

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

父容器设 min-height: 200px; max-height: 500px; overflow-y: auto;
table 保持 height: auto，靠内容自然撑开
为防单元格内长文本撑破，给 td, th 加 word-break: break-word;（注意不是 word-wrap，后者已废弃）
若需文字垂直居中，搭配 line-height 和 vertical-align: middle，但避免对 tr 直接设 height，它容易和 line-height 冲突

百分比高度在嵌套表格中为何失效？

当你把一个 table 嵌在另一个 table 的 td 里，再对内层 table 设 height: 80%，大概率没效果。根本原因是：外层 td 的高度由内容决定，不是由父 tr 或 table 的百分比定义的。

现代解法是绕过嵌套表格，改用 Flex 布局包裹独立 table：

用 div.table-pair { display: flex; gap: 16px; } 并列放两个表格容器
每个子容器设 flex: 1; min-height: 300px;，再在里面放 table
这样两个表格高度自动对齐，且各自可独立滚动
如果必须保留嵌套结构，唯一可靠方式是 JavaScript 动态读取外层 td 的 clientHeight，再赋给内层 table.style.height