直接给tr设height经常失效，因为chrome忽略该属性、firefox行为不一致，且tr高度由内部td/th决定；应优先在td/th上组合设置height、line-height、box-sizing:border-box和vertical-align:middle来可靠控制行高。
直接给 tr 设 height 为什么经常失效
因为 tr 的 height 属性在 Chrome 中基本被忽略，Firefox 行为也不一致，它不是 CSS 标准中可靠支持的样式属性。浏览器渲染表格时，tr 高度由其内部 td/th 决定，而非自身 height 值。
常见错误现象：写了 <tr style="height: 40px">，但实际高度还是被内容撑开，尤其含图片、多行文本或默认 padding 时。
<ul>
<li>别把 <code>height 写在 tr 上——它不保证生效，纯属侥幸
<tr height="40"> 已被 HTML5 废弃，兼容性和语义性双崩
<li>如果用了 <code>table-layout: fixed，tr 高度依然不响应，真正起作用的仍是单元格
td 和 th 上设 height + line-height 的实操要点
这是控制单行固定高度最稳的方式，尤其适合后台数据列表、报表等场景。
关键不是只写一个值，而是组合生效：
-
height和line-height必须相等（如都设为40px），才能让单行文字垂直居中且锁死视觉高度 - 必须加
vertical-align: middle，否则文字可能贴顶或贴底 - 必须设
box-sizing: border-box，否则默认content-box下 padding 会额外撑高 - 显式清空上下 padding：
padding: 0 8px（左右留白可保留，上下必须为 0）
示例 CSS：
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
td, th {
height: 40px;
line-height: 40px;
vertical-align: middle;
box-sizing: border-box;
padding: 0 8px;
}
多行内容或含图片时，height 为何不管用
height 在单元格里对多行文本、换行、图片、inline 元素完全失效——它只约束“内容盒”高度，但表格单元格的最终渲染高度由内部所有内容（包括图片 intrinsic size、换行后的行框堆叠）共同决定。
此时强行设 height: 60px 只会让内容溢出或被裁剪（除非配合 overflow: hidden）。
- 含图片：图片默认
display: inline，会拉高基线，vertical-align: middle有时也不够，得改display: block或flex - 多行文本：
line-height只控单行间距，不控总容器高；max-height+display: -webkit-box是截断方案，但兼容性有限 - 更可靠的做法：放弃
height，改用min-height+padding搭配，让行高随内容自适应但有下限
批量控制奇偶行、特定行或全表行高
用 CSS 选择器比重复加 class 更高效，也避免污染 HTML 结构。
- 全表统一：
tbody td, tbody th { height: 36px; line-height: 36px; ... } - 奇偶行不同：
tbody tr:nth-child(odd) td { background: #f9f9f9; }—— 注意：这里只能通过td间接影响高度，tr:nth-child(even) { height: 42px }不推荐 - 首行表头固定高：
thead th { height: 44px; line-height: 44px; } - 最后一行加底边距模拟间隔：
tbody tr:last-child td { padding-bottom: 12px; }，比设 height 更自然
真正容易被忽略的是：表格行高最终是“内容 + 样式”共同博弈的结果，没有一劳永逸的 magic 属性。每次调整都要打开 DevTools，看 computed styles 里 height、line-height、padding、border 是否真被应用，以及是否被 vertical-align 或图片 baseline 拉偏。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
