table行高必须设在td或th上，tr的height无效；应设height和line-height相等并配合border-collapse:collapse、box-sizing:border-box等确保高度稳定。
table 行高必须设在 td 或 th 上，tr 的 height 基本无效
Chrome 完全忽略 tr 上的 height，Firefox 表现也不一致——这不是浏览器 bug，而是 CSS 规范本身没把 tr 当作可设高度的盒子。真正起效的只有 td 和 th。
实操建议：
- 给
td, th同时设height和line-height，且两者值相等（如height: 48px; line-height: 48px;），单行文本就能垂直居中 - 加
box-sizing: border-box防止 padding 撑高 - 显式写
padding: 0，否则默认内边距会突破设定高度 - 绝对别在
tr上写height——它不参与盒模型计算，纯属误导
line-height 是控制单行节奏感的核心，但只对“形成行框”的内容有效
line-height 不是容器高度控制器，它只调节文字行内基线之间的距离。一旦单元格里出现图片、多行文本或 display: flex 子元素，它的作用就仅限于那几行文字本身，不再约束整个单元格视觉高度。
所以“节奏感”来自两件事：一是统一的 line-height 值让所有单行文本呼吸一致；二是配合 height 锁定容器边界，避免被撑开。
常见踩坑点：
- 父级
td设了line-height: 1.5，但子元素font-size是 12px，实际行高只有 18px，远小于你想要的 48px 视觉节奏 —— 此时必须用px值 - 用了无单位数字却忘了继承链里某层
font-size: 0（比如清除 inline 间隙的 hack），导致line-height计算结果为 0 - 在
td里套了个div并设display: flex，line-height对这个div完全失效
多行内容怎么保持节奏？line-height 失效后得换策略
当单元格内容可能换行（比如地址字段、备注栏），line-height + height 组合会立刻崩：内容撑高，视觉节奏断裂。
此时要放弃“锁死高度”，改用可控的截断或弹性结构：
- 用
max-height+overflow: hidden+display: -webkit-box截断多行文本（兼容性够用） - 把
td改成display: flex，再用align-items: center控制垂直对齐，line-height就不用管了 - 如果必须固定行高，优先用
font-size+line-height（都用px）+white-space: nowrap+text-overflow: ellipsis强制单行 - 动态渲染（React/Vue）中高度跳变，大概率是图片没占位或字体未加载完 —— 加
min-height和font-display: swap
表格整体节奏靠 border-collapse: collapse 打底
分离模式下（border-collapse: separate），cellspacing 和边框叠加会让实际高度浮动，尤其在缩放或不同设备上。这是很多“明明设了 height 却不准”的隐形原因。
必须加这一句：
table { border-collapse: collapse; }
然后才能谈 td 的 height 和 line-height 是否稳定。没有它，所有高度控制都是沙上筑塔。
另外，vertical-align: middle 要和 line-height 配合使用——单行时它才真正起效；多行时它只对第一行基线起作用，别指望靠它居中整块内容。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
