height: 100% 在 table 上无效是因为 table 默认不继承父容器高度，需 html、body 及所有中间父容器显式设 height；table 本身设 height: 100% 后，tr 按比例分配但内容超长仍会撑破；应将 min-height/max-height + overflow-y 用于 table 的直接父容器而非 table 自身。
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 的剪裁行为。
立即学习“前端免费学习笔记（深入）”；
- 父容器设
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
table-layout: fixed 对高度自适应的影响
设 table-layout: fixed 主要解决宽度问题，但它会间接影响高度表现：一旦列宽被锁定，单元格内换行逻辑更可控，从而减少因文字折行导致的高度跳变。
但要注意：它不改变 table 高度计算方式，也不能让 height: 100% 突然生效。它只是让高度变化更可预测。
- 必须配合显式
width（如width: 100%或具体像素）才生效 - 第一行
th或col必须设宽度（width: 20%或width: 120px），否则列宽回退到 auto - IE11+ 支持，但 Outlook（基于 Word 渲染）完全不识别该属性，邮件模板中禁用
- 若表格含图片，记得统一设
img { max-height: 100%; object-fit: contain; }，否则图片会撑高整行
div 上，而不是代码本身写错了。调试时建议逐层检查 computed style 中的 height 是否为 actual value，而非 inherited 或 auto。 
