的height属性基本无效，因浏览器支持极弱（chrome完全忽略），其高度由或决定；真正可控的做法是通过的height、line-height、box-sizing等样式精确控制行高。
直接在 <tr> 上写 <code>height 基本无效，尤其在 Chrome 里会被忽略；真正可控、跨浏览器一致的做法是控制 <td> 或 <code><th> 的尺寸与内距。<h3>为什么 <code><tr> 的 <code>height 不生效
浏览器对 <tr> 元素的 <code>height 属性支持极弱：Chrome 完全不认，Firefox 表现不稳定，Safari 可能部分响应但依赖内容。它不是标准渲染盒模型的一部分，本质是“行容器”，高度由其子元素（<td>）决定。<p>常见错误现象：<code><tr style="height: 60px"> 写了但行高没变，或者只在部分浏览器里临时有效。<ul><li>别把 <code>height 放在 <tr> 上——这是最常踩的坑<li><code><tr> 只接受极少样式（如 <code>background），height、padding、margin 都不推荐用
<td> 的 <code>height + line-height + box-sizing<td> 设置固定行高的实操写法<p>单行文本场景下，这是最稳的组合：让单元格视觉高度锁死，文字垂直居中。</p>
<pre class="brush:php;toolbar:false;">td {
height: 48px;
line-height: 48px;
box-sizing: border-box;
padding: 0;
vertical-align: middle;
}</pre>
<p>关键点说明：</p>
<ul>
<li>
<code>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>，而非 <code><tr>：<pre class="brush:php;toolbar:false;">/* 首行（表头） */
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;
}</p></pre>
<p>注意：</p>
<ul>
<li>选择器必须落到 <code>td 或 th 上才可靠
tr:nth-child() 匹配的是 <tr>，但它本身不控制高度，得再往下写 <code>tdcolspan 或 rowspan，某些选择器可能漏匹配，建议优先加 class 控制最麻烦的其实是混合内容：一行里既有短文本又有长描述，还嵌了图标和 badge。这种时候别硬套 height，老实用 padding + min-height + 合理的 line-height 组合，留出弹性空间——强行锁死反而导致文字被裁或布局错乱。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
