不能在上设height，应通过/的height、line-height、box-sizing:border-box和padding协同控制：height与line-height等值锁高，box-sizing防撑开，padding清上下留左右。
别在 根本原因有两个： 示例 CSS： 很多问题不是写错了，而是漏看了上下文：<tr> 上设 <code>height —— 浏览器基本不认，尤其是 Chrome 会直接忽略。真正能稳定控高的，是作用在 <td> 或 <code><th> 上的组合样式。
<h3>为什么 <code><tr> 的 <code>height 属性几乎无效
<tr> 不是标准渲染盒（rendering box），它的高度由子元素（即 <code><td>）决定；CSS 规范也未强制要求支持 <code><tr> 的 <code>height。你写 <tr style="height: 40px">，只要单元格里字体变大、加了 <code>padding、或内容换行，实际高度立刻突破。DevTools 里看到“Computed height”没变，不是生效了，而是浏览器压根没处理这个声明。
<td> 上怎么锁死单行固定高度
<p>适用于后台列表、状态栏等纯文本、字号统一、不允许换行的场景。关键不是只设一个属性，而是四个协同：</p>
<ul>
<li>
<code>height: 32px：设定容器物理高度
line-height: 32px：让单行文字垂直居中（值必须和 height 相等）box-sizing: border-box：确保 padding 和 border 不额外撑高padding: 0 8px：清掉上下内边距，左右留白用于呼吸感td, th {
height: 32px;
line-height: 32px;
box-sizing: border-box;
padding: 0 8px;
vertical-align: middle;
}
多行内容或不确定内容时怎么办
line-height 和 height 在这里都会失效。图片、<span></span>、换行文本会让单元格高度彻底失控。这时得换策略：
min-height: 32px + padding: 10px 8px 控制最小视觉高度，允许弹性撑开max-height: 64px + overflow: hidden + display: -webkit-box + -webkit-line-clamp: 2
<td> 改成 <code>display: flex，用 align-items: center 居中，但注意 IE11 兼容性
height 设在 <tbody> 上，并配合 <code>overflow-y: auto，否则 <table> 的 <code>height 会强制重算所有行高
容易被忽略的兼容性细节
border-collapse: collapse 是绝大多数业务表格的标配，它会让 padding 成为影响行高的最主要因素——此时调 padding 比调 height 更直接line-height 设成无单位值（如 1.5）在表格里风险高：如果某列用了不同 font-size，行高就不再一致；固定像素值（如 32px）反而更可控line-height 在 <td> 中的撑高行为比 Chrome 保守 1–2px，靠 <code>padding 可规避这种差异
min-height 和 font-display: swap 预留空间
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
