<tr>的height属性基本无效，因浏览器支持极弱（Chrome完全忽略），其高度由<td>或<th>决定；真正可控的做法是通过<td>的height、line-height、box-sizing等样式精确控制行高。
直接在 <tr> 上写 height 基本无效，尤其在 Chrome 里会被忽略；真正可控、跨浏览器一致的做法是控制 <td> 或 <th> 的尺寸与内距。
为什么 <tr> 的 height 不生效
浏览器对 <tr> 元素的 height 属性支持极弱：Chrome 完全不认，Firefox 表现不稳定，Safari 可能部分响应但依赖内容。它不是标准渲染盒模型的一部分，本质是“行容器”，高度由其子元素（<td>）决定。
常见错误现象：<tr style="height: 60px"> 写了但行高没变，或者只在部分浏览器里临时有效。
- 别把
height放在<tr>上——这是最常踩的坑 -
<tr>只接受极少样式（如background），height、padding、margin都不推荐用 - 真正起作用的是
<td>的height+line-height+box-sizing
<td> 设置固定行高的实操写法
单行文本场景下，这是最稳的组合：让单元格视觉高度锁死，文字垂直居中。
立即学习“前端免费学习笔记（深入）”；
td {
height: 48px;
line-height: 48px;
box-sizing: border-box;
padding: 0;
vertical-align: middle;
}关键点说明：
-
height和line-height必须相等，否则文字会偏上或偏下 -
box-sizing: border-box确保padding不撑高单元格（默认是content-box） -
padding: 0是必须项——哪怕只设padding-top: 4px，也会突破height -
vertical-align: middle配合line-height才能真正居中（仅靠line-height不够）
多行内容或动态内容怎么处理
一旦单元格里有换行文本、图片、按钮等，line-height 就不再主导整体高度，height 也容易被撑开。
这时要放弃“硬锁高度”，改用更鲁棒的方式：
- 用
min-height替代height，允许内容自然撑开（例如min-height: 48px） - 配合
padding控制留白（比如padding: 12px 16px），比设height更灵活 - 若需截断多行文本，用
display: -webkit-box+-webkit-line-clamp，而不是靠height - 避免
table-layout: fixed除非你同时严格控制列宽——否则内容溢出时高度仍不可控
批量设置某几行的行高（如奇偶行、首行）
用 CSS 选择器作用于 <td>，而非 <tr>：
/* 首行（表头） */
th {
height: 52px;
line-height: 52px;
}
<p>/<em> 偶数行 </em>/
tr:nth-child(even) td {
height: 44px;
line-height: 44px;
}</p><p>/<em> 某个特定类的行 </em>/
tr.important-row td {
height: 60px;
line-height: 60px;
}注意：
- 选择器必须落到
td或th上才可靠 -
tr:nth-child()匹配的是<tr>，但它本身不控制高度，得再往下写td - 如果表格用了
colspan或rowspan，某些选择器可能漏匹配，建议优先加 class 控制
最麻烦的其实是混合内容：一行里既有短文本又有长描述，还嵌了图标和 badge。这种时候别硬套 height，老实用 padding + min-height + 合理的 line-height 组合，留出弹性空间——强行锁死反而导致文字被裁或布局错乱。
