line-height 不能设在 tr 上，必须设在 td/th 上；纯文本用 height+line-height+vertical-align 三件套，图文混排改用 flex 或 max-height 截断。
line-height 不能直接设在 tr 上，设了也基本无效
Chrome 会忽略 tr 元素上的 line-height，Firefox 表现也不一致。表格行高不是靠“行”元素控制的，而是由单元格内容和样式共同决定。你写 tr { line-height: 40px; }，浏览器大概率当没看见。
真正起作用的是 td 或 th —— 它们才是承载文本、图片、表单控件的实际容器。只要内容不换行、不含块级子元素，line-height 就能锁住单行视觉高度。
- 设在
td上才可靠，tr只是逻辑容器，不参与盒模型计算 - 如果
td里有div、img或多行文本，line-height仅影响其内部文本行距，不约束整体单元格高度 - 别指望
vertical-align单独生效：它只对“行内上下文”起作用，而表格单元格默认是 table-cell，需要配合line-height或height才能垂直居中
单行文本表格：用 height + line-height + vertical-align 三件套
这是后台数据列表、订单表格等固定行高的典型场景。目标是让文字在 40px 高的单元格里垂直居中，且不被 padding 撑开。
关键不是“设多高”，而是让所有尺寸对齐：
-
height: 40px和line-height: 40px必须相等，否则文字会上浮或下沉 -
vertical-align: middle是必须项，不然文字默认 baseline 对齐，看起来偏下 -
box-sizing: border-box+padding: 0，否则默认 padding 会让实际高度超过 40px - 避免在
td里嵌套p或span——它们自带 margin 或继承 font-size，干扰计算
示例 CSS：
td {
height: 40px;
line-height: 40px;
vertical-align: middle;
box-sizing: border-box;
padding: 0;
}
多行/含图片的单元格：line-height 失效，改用 max-height 或 display: flex
一旦 td 里出现换行、img、button 等非纯文本内容，line-height 就不再决定单元格最终高度。浏览器会按内容自然撑开，height 会被忽略（尤其 Chrome）。
此时有两个务实路径：
- 用
max-height: 80px+overflow: hidden截断，适合摘要类字段；再加display: -webkit-box+-webkit-line-clamp: 2实现两行省略（注意兼容性） - 彻底放弃传统表格布局，在
td内部用display: flex重写内容结构：flex-direction: column控制堆叠，align-items和justify-content控制对齐，min-height保底 - 不要给
tr设height或min-height——它不渲染盒子，只是语义分组
全局行高设置别碰 body 的 line-height，表格要单独管
body { line-height: 1.6; } 对段落、标题很友好，但会污染表格——td 继承这个值后，若字号是 14px，实际行高就是 22.4px，远小于你想要的 40px 数据行高。
表格行高必须隔离处理：
- 用独立选择器，比如
table.data-table td或.order-list th，避免继承干扰 - 无单位数字（如
1.4）只适合正文流式排版；表格建议用像素值（24px）或明确高度（40px），因为数据密度高，需绝对可控 - 如果用了 rem 动态调字号，表格单元格的
font-size建议固定（如font-size: 14px），再配line-height: 24px，否则乘数会放大误差
最常被忽略的一点：表格行高不是“调一个属性就能搞定”的事，它是内容类型、盒模型、渲染机制三者博弈的结果。先判断单元格里装的是什么，再选策略——纯文本？用三件套；图文混排？上 flex；不确定？打开开发者工具看 computed height 和 line-height 的实际值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
