<tr>的height基本无效，因浏览器不支持其高度渲染，实际行高由<td>/<th>决定；应设单元格height+line-height（值相等）、box-sizing:border-box、padding上下为0并vertical-align:middle来稳定控制。
直接在 <tr> 上写 height 基本无效，Chrome 完全忽略，Firefox 表现不稳定——别这么干。
为什么 <tr> 的 height 不生效
浏览器对 <tr> 元素的 height 属性支持极弱，它不是 CSS 规范中定义的“可渲染高度属性”。实际行高由其内部 <td> 或 <th> 决定，且受 box-sizing、padding、line-height 和 vertical-align 共同影响。
-
<tr>本身没有盒模型高度控制能力，设了也白设 - 即使部分旧版 Firefox 看似响应
height，也是靠内部单元格撑出来的副作用，不可靠 - 用
border-collapse: collapse后，<tr>更彻底失去独立高度语义
真正有效的做法：给 <td> 或 <th> 设 height + line-height
这是最稳定、兼容性最好的单行固定高度方案，尤其适合后台数据表格。
- 必须同时设置
height和line-height（值相等），例如：height: 40px; line-height: 40px; - 加
box-sizing: border-box，防止padding撑高单元格 - 显式清空上下内边距：
padding: 0 8px;（左右留白可保留，上下必须为 0） - 配合
vertical-align: middle实现文字垂直居中
示例：
立即学习“前端免费学习笔记（深入）”；
td {
height: 40px;
line-height: 40px;
box-sizing: border-box;
padding: 0 12px;
vertical-align: middle;
}
多行内容或动态文本怎么办
line-height 在换行或含图片时就失效了，此时不能只靠它锁高度。
- 若需截断显示，用
max-height+display: -webkit-box+-webkit-line-clamp（仅限 WebKit） - 更通用的做法是改用 Flex 布局重写单元格：
display: flex; align-items: center; min-height: 40px; - 避免用
overflow: hidden粗暴裁剪，可能切掉重要内容或图标 - 如果内容高度天然不一致（如含按钮、头像），优先用
min-height而非固定height，再配align-items: center
容易被忽略的兼容性细节
看似简单的高度控制，实际在不同场景下行为差异很大。
-
line-height写无单位数字（如1.5）会继承父级字体大小计算，导致高度浮动——固定高度场景一律用px或em - 表格用了
border-collapse: separate时，cellspacing已废弃，改用border-spacing控制行列间距，它不影响单元格自身高度 - 动态渲染表格（如 Vue/React）时，若单元格内有图片，务必设
img { max-height: 100%; }或预设min-height，否则加载完成前会塌陷
