直接在td/th上设line-height（无单位值）配合vertical-align和padding是最稳路径，因tr的height被chrome完全忽略、firefox不一致，且tr不参与盒模型计算，真正决定行高的是td/th的内容高度、padding、line-height与vertical-align组合效果。
直接在 td 和 th 上设 line-height（无单位数值），配合 vertical-align 和 padding，是兼顾可读性、响应式与兼容性的最稳路径。
为什么不能只靠 tr 的 height 属性
Chrome 完全忽略 tr 的 height，Firefox 表现不一致；tr 本身不参与常规盒模型计算，它只是行容器，不“撑高”也不“收束”。真正决定视觉行高的，是每个 td/th 的内容高度、padding、line-height 和 vertical-align 组合效果。设在 tr 上的样式大概率被浏览器跳过或覆盖。
- 检查 DevTools 的 “Computed” 面板，常会发现
tr的height显示为auto，哪怕你在 CSS 里写了height: 40px - 若某列
td含图片或换行文本，整行会被它拉高——此时仅调tr高度毫无意义 - 用
border-collapse: collapse是前提，否则默认分离边框会让实际高度浮动难控
line-height 值该用数字、px 还是百分比
中文表格推荐起步值 line-height: 1.6，窄列或多字标题可升至 1.75。必须用无单位数字，不是 20px 或 160%。
-
line-height: 1.6按当前font-size动态计算：14px 字号 → 22.4px 行高；用户放大字体到 18px → 自动变成 28.8px -
line-height: 20px在 iOS Safari 缩放字体或屏幕阅读器强制放大时，极易导致文字重叠或行距崩坏 -
line-height: 160%看似等价，但继承的是计算后的绝对值（如父级算出 22.4px），子元素再设line-height会基于这个像素值而非比例，嵌套深了就失控
单行 vs 多行内容的垂直居中策略不同
line-height 只管行内空间，不负责对齐。是否能“居中”，取决于你用的是单行锁死法，还是多行弹性法。
- 单行纯文本：用
height: 40px; line-height: 40px; vertical-align: middle;，三者缺一不可；padding: 0必须加，否则默认内边距会突破设定高度 - 多行文本或含图标/图片：
line-height失效，改用display: flex; align-items: center; padding: 8px 12px;；min-height替代height，保底不塌陷 - 表头有括号说明（如“状态（进行中）”）：禁用
overflow: hidden截断，改用white-space: normal; word-break: break-word;，再配min-height
动态渲染中行高跳变的真实原因和应对
React/Vue 列表首次渲染后“抖一下”，不是 CSS 写错了，而是字体未加载完、图片没解码，导致初始行高计算错误。
- 给自定义字体加
font-display: swap，让文本先以系统字体撑开空间，再替换 - 图片务必带
width和height属性（或aspect-ratio），预留占位，避免解码后突然撑高 - 关键表格区域加
min-height: calc(100vh - 200px)，防白屏期高度坍塌引发布局重排 - 用 DevTools 的 “Rendering” 面板勾选 “Layout Shift Regions”，一眼定位跳变源头
表格行高从来不是调一个属性就能搞定的事——它始终是 line-height、padding、height/min-height、vertical-align 和内容结构共同作用的结果，而最容易被忽略的，是把 line-height 错设在 table 或 tr 上，然后花半小时排查“为什么没生效”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
