line-height必须设在td或th上，chrome完全忽略tr的height和line-height；真正生效的是td,th{line-height:1.5;vertical-align:middle;padding:8px 12px}。
line-height 必须设在 td 或 th 上，不是 tr
Chrome 完全忽略 tr 的 height 和 line-height，Firefox 表现也不一致。你写 <tr style="line-height: 40px">，基本等于没写。<p>真正起作用的是给单元格本身加样式：</p>
<pre class="brush:php;toolbar:false;">td, th {
line-height: 1.5; /* 推荐：随字体缩放 */
vertical-align: middle;
padding: 8px 12px; /* 避免用 cellpadding，统一用 CSS */
}</pre>
<ul>
<li>单行文本要严格控高（比如后台列表），就用 <code>line-height: 40px + height: 40px + overflow: hidden
line-height 只管文字行距，不约束整体高度——此时得靠 max-height 和 display: -webkit-box 截断，或改用 flex 布局line-height 在 table 或 tbody 上，它不会继承到单元格里
height 在 td 上为什么有时无效？
因为默认 box-sizing: content-box，而 padding 和 border 会额外撑高；再加上 vertical-align 默认是 baseline，会让文字底部对齐，导致视觉高度浮动。
要让 height: 40px 真生效，必须配套：
td {
height: 40px;
line-height: 40px;
vertical-align: middle;
box-sizing: border-box;
padding: 0;
border: 0;
}
- 漏掉
box-sizing: border-box，哪怕只设padding: 2px，实际高度就是 44px -
vertical-align: baseline会让单元格高度被字母 descender（如 g、y 下延部分）拉低，视觉上“不够高” - 如果用了
border-collapse: separate（默认），边框双倍叠加也会干扰高度计算
多行内容怎么避免行高跳变？
异步加载数据后，字体还没渲染完、图片没占位、或 Web Font 加载延迟，都会让单元格先按默认字体撑开，再重绘收缩——这就是“跳变”。这不是 CSS 写错了，是时机问题。
- 给
td设min-height（比如min-height: 48px），比固定height更安全 - 图片加
height和width属性，或用aspect-ratio占位 - Web Font 加载完成前，用
font-display: optional或 fallback 字体控制初始渲染高度 - 避免在 JS 渲染表格后才注入 CSS；把关键样式提前内联或预加载
为什么 border-collapse: collapse 是必选项？
不加它，cellspacing 和 cellpadding 这些 HTML 属性还在起作用，但行为不可控；分离模式下相邻边框叠加，会让行高忽大忽小，尤其在缩放或不同 DPI 屏幕上。
加上之后：
table {
border-collapse: collapse;
}
td, th {
border: 1px solid #ddd;
}
- 所有边框合并为单线，高度计算稳定
- 不再受
cellspacing干扰，padding成为唯一可控的内边距手段 - 配合
box-sizing: border-box，height+padding组合才真正可预期
表格行高看似简单，真正难的是内容动态性与浏览器渲染节奏之间的博弈。固定像素值只适用于纯文本、已知字号、无异步资源的场景；一旦涉及图片、字体加载、响应式缩放，就得放弃“锁死高度”的执念，转而用 min-height、line-height 和布局容错机制来兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
