table { height: 100% } 没反应是因为 table 默认不继承父容器高度，需 html、body 及所有中间父容器（含直接包裹的 div）均显式设 height，且高度控制应移至 table 的直接父容器，用 min-height + max-height + overflow-y 实现自适应滚动。
table { height: 100% } 为什么没反应
因为 table 默认不继承父容器高度，height: 100% 没有计算基准。即使你给 div 包裹层写了 height: 400px，只要 html 和 body 没设 height: 100%，table 的百分比高度就无效。
常见错误现象包括：Chrome 看似生效、Firefox 完全忽略；或表格被压成一条线、内容溢出却无滚动。
-
html, body { height: 100% }是硬性前提，缺一不可 - 包裹
table的**直接父容器**必须有明确高度（如height: 400px或min-height: 300px），不能是默认流布局 -
table自身设height: 100%后，tr会按比例分配，但任意单元格内容超长（比如长文本、图片）仍会撑破整行——这不是 bug，是 CSS 表格渲染规则
让表格在固定范围内自适应并可滚动
真正可控的做法，是把高度控制逻辑从 table 移到它的**直接父容器**上，用 min-height + max-height + overflow-y: auto 组合。
这个父容器通常是 div，它负责“框住”表格的视觉范围；table 保持 height: auto，由内容自然撑开。
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 父容器样式示例：
min-height: 200px; max-height: 500px; overflow-y: auto; - 为防单元格内长文本撑破行高，给
td, th加word-break: break-word;（注意不是已废弃的word-wrap） - 若需文字垂直居中，用
line-height配合vertical-align: middle，但别对tr设height，否则和line-height冲突
tbody 有固定高度需求时怎么处理
当你要限制的是表格主体区域（比如只让 tbody 高 400px，表头 thead 固定在顶部），必须把 height 和 overflow-y 设在 tbody 上，而不是 table 或 tr。
但要注意：tbody { height: 400px; overflow-y: auto; } 在部分老浏览器（如 IE11）中支持差，且需配合 display: block 才能生效——这会破坏表格语义和默认对齐行为。
- 更稳妥的现代方案：用
div包裹table，再用position: sticky固定thead，配合父容器max-height控制整体滚动范围 - 如果必须用
tbody滚动，请确保所有th/td列宽已通过table-layout: fixed+<col>锁死，否则列宽会在滚动时错位
嵌套表格里 height 百分比为何失效
当你把一个 table 嵌在另一个 table 的 td 里，并给内层 table 设 height: 80%，它几乎一定不生效。
根本原因是：外层 td 的高度由其内容决定，不是由父 tr 或 table 的百分比定义的。浏览器不会为嵌套表格建立高度继承链。
- 推荐解法：放弃嵌套表格，改用
display: flex布局包裹多个独立table容器 - 例如：
div.table-pair { display: flex; gap: 16px; }，子容器设flex: 1; min-height: 300px;，再各自放table - 若必须保留嵌套结构，唯一可靠方式是用 JavaScript 动态读取外层
td的clientHeight，再赋给内层table.style.height
最常被忽略的一点：所有高度控制都依赖于「明确的上下文高度」。没有显式声明的 html、body、中间父容器，任何百分比或 100% 都只是空谈。调试时先检查 DevTools 中这些祖先节点的 Computed height 是否有值，比反复调 table 样式更有效。
