table-layout: auto 下 height: 100% 表现不一致是因为该模式不保证高度百分比解析，各浏览器对行高、换行及继承的处理逻辑不同；需改用 table-layout: fixed 并满足明确宽度、打通高度链路、避免干扰属性。
为什么 table-layout: auto 下 height: 100% 在 Chrome/Firefox/Safari 中表现不一致
不是你写的 height: 100% 有问题，而是 table-layout: auto（默认值）根本不保证列或单元格高度能被百分比解析——它只管列宽推算，且对行高、内容换行、单元格继承高度的处理逻辑在各浏览器间差异极大。Safari 可能让 td 高度由内容撑开，Chrome 却尝试继承父 tr 高度，Firefox 则常忽略 height 直接 fallback 到 auto。
必须同时满足的三个条件才能让 table-layout: fixed 支持 height 百分比
table-layout: fixed 本身不解决高度问题，但它能稳定列宽上下文，为高度控制打基础。要让 height: 100% 在 td 或 tr 上生效，得同时满足：
-
table元素必须有明确宽度：width: 100%或width: 800px，否则fixed模式无法建立尺寸基准 - 高度链路必须打通：
html, body { height: 100%; }+ 父容器（如.table-wrapper）显式设height: 100%，否则td { height: 100% }仍无包含块可依 - 避免干扰属性：删掉
td上的min-height、max-height、vertical-align: top（某些版本 Firefox 会强制重置高度计算）
更可靠的替代方案：绕过 table 的 height 依赖
硬推 height: 100% 在 table 布局里极易翻车，尤其嵌套深或用 UI 框架时。直接改用现代布局更稳：
- 把
table替换为display: grid容器，用grid-template-rows: 1fr控制行高，height百分比失效问题自然消失 - 若必须保留语义化
table，给tbody设display: block; height: 100%;，再让tr用display: flex，此时td的flex: 1比height: 100%更可控 - 对单个
td内容区域，不用height: 80%，改用max-height: 40vh; overflow-y: auto;，既防溢出又跨浏览器一致
调试时最容易被忽略的断点位置
很多人卡在“明明写了 html, body { height: 100% }”，却没发现真正断链的是 table 的直接父容器——比如某个 .panel 被 position: absolute 或 display: inline-block 处理后，就不再是 table 的包含块，导致 height: 100% 回退到 html 计算。务必用开发者工具逐层点开 Computed 面板，检查每一级的 height 是 auto 还是具体像素值，而不是只盯着 table 自身。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
