直接设 tr 或 td 的 height 不推荐，因其会强制截断内容、与 line-height 冲突导致垂直错位，且老版 IE 兼容性差；首选方案是用 --table-cell-line-height 变量配合 line-height 和 vertical-align 控制对齐。
为什么直接设 tr 或 td 的 height 不推荐
因为 height 会强制截断内容，一旦单元格内有换行文本、图标或内联元素，就容易出现溢出或裁剪；更关键的是，它和 line-height 逻辑冲突——line-height 控制的是行内框高度，而 height 是盒模型高度，两者叠加常导致垂直对齐错位。老版 IE 对 tr { height } 解析也不一致，容易在响应式场景下失守。
--table-cell-line-height 变量 + line-height: var(--table-cell-line-height) 是首选方案
把行高抽象为变量，既保留 CSS 层叠能力，又支持 JS 动态更新和媒体查询响应：
-
:root中定义默认值：--table-cell-line-height: 1.5; -
td, th统一使用：line-height: var(--table-cell-line-height); - 若需局部调整（如表头加高），可覆盖：
th { line-height: var(--table-cell-line-height, 1.8); } - 配合
vertical-align: middle使用，能稳定实现文字/图标垂直居中，无需 flex 或伪元素
表格内容对齐必须拆开控制 text-align 和 vertical-align
很多人误以为设了 line-height 就能搞定对齐，其实不然。表格单元格的对齐是两层独立机制：
-
text-align管水平（left/center/right） -
vertical-align管垂直（top/middle/bottom），且只对td/th生效，对tr无效 - 如果单元格里塞了
img或button，它们默认 baseline 对齐，会和文字错位；此时加vertical-align: middle才真正生效 - 避免在
table或tbody上设vertical-align，它不触发渲染计算
动态更新时别漏掉 document.documentElement.style.setProperty() 的作用域
用 JS 改行高变量，必须作用于 :root 节点，否则子元素读不到新值：
立即学习“前端免费学习笔记（深入）”；
document.documentElement.style.setProperty('--table-cell-line-height', '1.7');
常见错误包括：
- 写成
document.body.style.setProperty(...)→ 无效，:root才是变量作用域根 - 变量名拼错，比如写成
--table-line-height却在 CSS 里用--table-cell-line-height - 没处理单位：CSS 变量里存纯数字（如
1.6），JS 更新时也别加px或em，否则line-height计算异常 - 在 MutationObserver 回调里更新变量后，未确认是否所有
td已完成重排（一般不需要手动触发，但复杂嵌套表格可能需getComputedStyle(td).lineHeight验证）
line-height 的继承行为和普通块级元素不同——它不会自动“撑开” td 高度来容纳多行内容，除非你同时确保 td 没有 height 约束且 box-sizing 是 border-box。变量再灵活，也绕不开这个底层渲染规则。 
