百分比 height 在 table 上不生效是因为父元素（如 html、body）默认高度为 auto，导致子元素无法计算百分比；必须为 html、body 及表格容器设置明确高度（如 100vh），并将 overflow-y: auto 应用于外层容器而非 table 本身，配合 table-layout: fixed 和 width: 100% 实现稳定高度与滚动。
百分比 height 在 table 上为什么经常不生效
因为 height: 80% 这类写法依赖父元素有明确高度，而默认的 body 和 html 高度是 auto（由内容撑开），不是视口高度。浏览器无法计算“80% 的 undefined”，结果就是忽略该声明。
常见错误现象：表格明明写了 height: 100%，却还是贴着内容高度，没占满容器；或设置了 min-height: 500px，但滚动条没出现，内容直接溢出。
- 必须给
html和body设置height: 100vh（推荐）或height: 100% - 如果表格包在某个
div里，那个div也得有明确高度（比如height: 60vh或max-height: 400px） -
table自身不能直接设height: 100%后再加overflow-y: auto—— 表格元素不支持内部垂直滚动，得用外层容器控制
让表格内容可滚动、高度可控的正确结构
核心思路：把 table 放进一个有固定/限制高度的容器里，对容器设 overflow-y: auto，而不是对 table 本身设。
使用场景：后台数据列表、日志表格、带筛选的报表等需要固定可视区域、内容可能超长的情况。
立即学习“前端免费学习笔记（深入）”；
- 外层容器（如
div）设max-height: 500px或height: 60vh，并加overflow-y: auto -
table保持height: auto，不设固定高；靠table-layout: fixed防止列宽被长文本撑爆 - 单元格内用
word-break: break-word或overflow-wrap: break-word处理长文本
<div style="max-height: 400px; overflow-y: auto;">
<table style="table-layout: fixed; width: 100%;">
<thead><tr><th style="width: 20%">ID</th><th>描述</th></tr></thead>
<tbody><tr><td>1</td><td style="word-break: break-word">超长URL超长URL超长URL...</td></tr></tbody>
</table>
</div>
table-layout: fixed 是响应式表格的关键开关
默认的 table-layout: auto 会让浏览器等所有内容渲染完再算列宽，小屏下一条长文本就能把整列拉宽，破坏对齐，间接导致表格高度不可控。
设成 fixed 后，列宽只看第一行 <th> 或 <col> 的宽度声明，后续行内容再长也不会影响列宽，高度更稳定。
- 必须配合
width: 100%才生效，否则fixed会被忽略 -
<th>或<col>上要写明确宽度，例如style="width: 15%"或style="width: 120px" - 列数多时别硬凑百分比，可用
minmax(100px, 1fr)+ CSS Grid 替代，table不是万能的
min-height 和 max-height 组合比 height 更实用
单纯设 height: 300px 容易截断内容；设 height: auto 又可能撑满整页。真正好用的是组合策略。
性能影响小，兼容性好（IE9+ 都支持），且能兼顾空表和大数据量两种极端情况。
- 空表格时，
min-height: 200px保证有基本展示区域 - 内容增多时，
max-height: 500px限制最大高度，超出部分靠外层容器滚动 - 避免同时设
height和min-height—— 浏览器会优先按height固定，min-height失效
容易被忽略的一点：表格高度自适应从来不是单靠 CSS 就能一劳永逸的事。内容是否含图片、是否动态加载、是否要支持打印样式，都会改变最优解。别迷信某一套代码，先看实际 DOM 结构和内容特征再动手。
