tr 上设 height 无效是因 css 规范未将 tr 视为可设高度的盒子，其高度由 td/th 决定；统一行高应设 td/th 的 height、line-height、padding、box-sizing 及 border-collapse: collapse。
tr 上设 height 基本无效，Chrome 完全忽略，Firefox 表现不一致——这不是 bug，是 CSS 规范本身没把 tr 当作可设高度的盒子。统一行高必须作用于 td 或 th。
为什么直接给 tr 写 height 不起作用
浏览器渲染表格时，tr 是一个“行盒”（row box），不参与标准盒模型计算。它的高度由内部所有 td/th 的最大高度决定，而非自身 height 值。开发者工具里能看到 tr 的 height 被标记为 “not applicable” 或直接 ignored。
- Chrome：完全无视
tr { height: 40px } - Firefox：可能部分响应，但受
border-collapse、vertical-align等影响，结果不可控 - 即使生效，也只在内容未撑开时“暂时”起效，一旦某列文字换行或插入图片，整行立刻被撑高
统一行高的可靠写法：给 td 和 th 同时设 height + line-height
单行文本场景下，这是最稳的组合：两者值相等，文字自动垂直居中，且视觉高度被锁定。
- 必须同时设置：
height: 48px和line-height: 48px（不能只写一个） - 加
box-sizing: border-box，防止边框或 padding 撑破设定高度 - 显式写
padding: 0—— 浏览器默认有上下内边距，不重置就会突破 48px - 避免在
td里再套div或用display: flex，否则line-height对子元素失效
td, th {
height: 48px;
line-height: 48px;
padding: 0;
box-sizing: border-box;
vertical-align: middle;
}
多行内容或动态渲染时，别硬锁 height
只要单元格里可能出现换行（如地址、备注）、图标、图片或框架动态插入内容，height + line-height 就会失效——内容会直接撑开单元格，破坏统一节奏。
- 改用
min-height: 48px+padding: 12px 8px，靠内边距提供呼吸感，允许自然撑高 - 若必须截断，用
max-height: 96px+overflow: hidden+display: -webkit-box+-webkit-line-clamp: 2 - React/Vue 中高度跳变？大概率是图片没占位或字体未加载完 —— 给
td加min-height，图片加width/height属性，字体加font-display: swap - 表头（
th）调高后，tbody的td必须同步检查vertical-align，否则上下不对齐
容易被忽略的全局前提：border-collapse: collapse
分离模式（border-collapse: separate）下，cellspacing 和边框叠加会让实际行高浮动，尤其在缩放、打印或不同设备上。很多“明明写了 height 却不准”的问题根源在此。
- 必须在
table上加border-collapse: collapse - 配套禁用已废弃的 HTML 属性：
cellspacing="0"、cellpadding="0"，全交由 CSS 控制 - 如果用了边框，确保
border宽度计入box-sizing: border-box，否则仍可能撑高
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
