直接给tr设height基本无效，真正起效的是为td/th设置height和line-height相等，并配合box-sizing:border-box、padding:0及border-collapse:collapse确保高度稳定。
直接给 tr 设 height 基本无效，别白费力气
Chrome 完全忽略 tr 上的 height，Firefox 表现也不一致——这不是 bug，是 CSS 规范没把 tr 当作可设高度的盒模型元素。你写 <tr height="60"> 或 tr { height: 60px; }，最终高度大概率还是由内容撑开。
真正起效的只有 td 和 th。要让某一行“看起来”更高，必须作用于该行所有单元格。
- 删掉所有 HTML 属性里的
height（如<tr height="...">），W3C 已弃用 - 用 CSS 类或选择器定位目标行，再给它的
td/th设置样式 - 避免用内联
style写在tr上，它不会透传到单元格
用 nth-child 或类名控制特定行高度
想让第 2 行高一点、奇数行矮一点、某类数据行固定高度？必须通过选择器匹配到对应行的单元格，再统一设 height + line-height。
例如：第 3 行设为 56px 高，且单行文本垂直居中：
立即学习“前端免费学习笔记（深入）”；
tr:nth-child(3) td,
tr:nth-child(3) th {
height: 56px;
line-height: 56px;
box-sizing: border-box;
padding: 0 12px;
}
-
tr:nth-child(3) td比tr:nth-child(3) > td更稳妥，能覆盖 colspan 合并单元格 - 务必同时写
box-sizing: border-box和padding: 0，否则默认内边距会突破设定高度 - 如果该行有
th（比如表头行），也要一并包含，否则表头和数据行高度不一致
多行内容怎么保持节奏感而不撑高？
一旦某行单元格里出现换行文本、图片或 flex 容器，height + line-height 组合立刻失效——内容会直接撑开单元格，破坏整行视觉节奏。
此时不能硬锁高度，得换策略：
- 用
max-height+overflow: hidden+display: -webkit-box截断两行文本（兼容性够用） - 把
td改成display: flex，再用align-items: center控制垂直对齐，line-height就不用管了 - 若必须固定高度，优先用
white-space: nowrap+text-overflow: ellipsis强制单行，配合font-size和line-height（都用px）
动态渲染时高度跳变，大概率不是样式问题
React/Vue 渲染完表格，行高忽高忽低？常见原因不是 CSS 写错了，而是：
- 图片没设宽高占位，加载后重排导致行高突变
- 字体未加载完，浏览器先用 fallback 字体渲染，等 Web Font 到位后行高收缩/拉伸
- 表格用了
table-layout: auto，列宽随内容浮动，间接影响行高稳定性
解决办法：给 img 加 width/height 属性；用 font-display: swap；表格加 table-layout: fixed；关键行加 min-height 防抖动。
最易被忽略的是：border-collapse: collapse 必须设，分离模式下边框叠加会让实际高度浮动，尤其在缩放或不同设备上。
