tr 的 height 基本无效，因 tr 非可渲染盒且规范未强制支持；应通过 td/th 的 height、line-height、box-sizing、padding 和 vertical-align 组合控制行高。
tr 上设 height 基本无效，别白费劲——浏览器对 tr 的 height 支持极差，Chrome 直接忽略，Firefox 行为不一致，靠它做固定行高等于埋雷。
为什么 tr 的 height 不生效？
根本原因有两个：一是 tr 是表格行容器，不是“可渲染盒”，它的高度由内部 td/th 决定；二是 CSS 规范没强制要求浏览器支持 tr 的 height，实际渲染时被降级或忽略。
- 即使写了
<tr style="height: 32px">，只要单元格里文字换行、有 padding、font-size 变大，高度立刻突破 -
line-height在tr上设置也无效，它只作用于内联内容，不控制容器高度 - 某些旧版 IE 或 quirks mode 下看似生效，纯属偶然，不可复现也不可依赖
真正能锁定行高的写法：只动 td 和 th
把高度控制权交给单元格，才是稳定方案。关键不是“设多高”，而是“怎么锁住不撑开”。
- 给
td、th同时设height+line-height（值相等），单行文本就能垂直居中且不溢出 - 必须加
box-sizing: border-box，否则默认content-box会让padding额外增加高度 - 显式清空上下
padding：padding: 0 8px（左右留白，上下归零） - 禁用
vertical-align: baseline默认值，改用vertical-align: middle配合line-height
示例：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
td, th {
height: 32px;
line-height: 32px;
box-sizing: border-box;
padding: 0 8px;
vertical-align: middle;
}
内容超长怎么办？不能只靠 line-height
line-height 只管单行间距，一旦文本换行、插入图片、嵌套 span，高度就失控。这时得组合手段：
- 用
max-height: 32px+overflow: hidden强制截断（适合后台列表，不要求显示全文） - 配合
text-overflow: ellipsis和white-space: nowrap实现单行省略（需display: block或inline-block） - 多行场景放弃固定像素高度，改用
min-height: 32px+padding控制最小视觉高度，允许弹性撑开 - 极端情况（如 Excel 导出 HTML 表格），加
table-layout: fixed配合word-break: break-all防止宽文本撑列
表格整体高度也要固定？小心 tbody 暗坑
如果设了 table { height: 400px }，浏览器会自动重算所有 tr 高度来填满，你前面设的单元格高度全作废。
- 想让空白区域留空（比如 5 行 × 32px = 160px，但表格仍占 400px），必须把高度设在
tbody上，并设display: block - 或者用
tbody { height: 400px; overflow-y: auto }，滚动内容区，表头固定（需额外处理thead定位） - 绝对别给
tr设height还同时给table设height——这是冲突配置，结果完全不可预测
真正难的不是写几行 CSS，而是意识到：表格不是 div，它的盒模型和渲染逻辑是特例。固定行高本质是压制内容弹性，而 HTML 表格天生为内容自适应设计。越想“锁死”，越要检查每一处 padding、line-height、box-sizing 和 display 层级——漏一个，就破功。
