如何设置HTML表格的自适应高度？百分比单位的应用技巧-html教程-PHP中文网

百分比 height 在 table 上不生效是因为父元素（如 html、body）默认高度为 auto，导致子元素无法计算百分比；必须为 html、body 及表格容器设置明确高度（如 100vh），并将 overflow-y: auto 应用于外层容器而非 table 本身，配合 table-layout: fixed 和 width: 100% 实现稳定高度与滚动。

如何设置html表格的自适应高度？百分比单位的应用技巧

百分比 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 本身设。

使用场景：后台数据列表、日志表格、带筛选的报表等需要固定可视区域、内容可能超长的情况。

html-ppt-to-pdf

将使用 `

` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。

下载

外层容器（如 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>