tr上设min-height不生效是因为css规范规定tr作为表格行盒不支持该属性，必须配合table-layout: fixed和显式width才能激活；td/th上设min-height同样无效，推荐用line-height+height锁定单行高度或采用table-layout: fixed方案。
tr 上设 min-height 为什么经常不生效
直接写 tr { min-height: 48px; } 大概率没反应，不是你写错了，是浏览器根本没打算支持——tr 元素在 CSS 规范里属于「表格行盒」，它本身不接受 min-height，除非父级 table 启用了固定布局模式。Chrome、Firefox、Safari 都按标准执行，这不是 bug，是设计使然。
常见错误现象：样式写了、开发者工具里也显示“已应用”，但单元格内容只有一行字时，行还是塌缩到 20px 左右。
- 必须配合
table-layout: fixed才能激活tr的min-height -
table必须有明确宽度（如width: 100%或具体像素值），否则固定布局无法计算列宽，连带导致行高渲染失效 - 不要同时写
height和min-height，height会完全覆盖min-height
table-layout: fixed + tr min-height 是最稳方案
这个组合在 IE8+ 和所有现代浏览器中都可靠，语义也保持原样，不用改 display 类型或破坏表格结构。
实操要点：
- 给
table加table-layout: fixed和显式width - 把
min-height写在tr上，不是td或th -
td/th用padding和vertical-align微调内容位置，别碰height
示例代码：
table {
table-layout: fixed;
width: 100%;
}
tr {
min-height: 48px;
}
td, th {
padding: 8px 12px;
vertical-align: middle;
}
单行文本场景下，line-height 比 min-height 更轻量
如果你只是想让“文字居中、视觉高度不低于 44px”，而不是应对多行内容动态撑开，line-height 是更简单、兼容性更好的选择。
注意点：
-
line-height必须设在td或th上，设在tr上无效 - 搭配
height和vertical-align: middle可锁死单行高度（例如：height: 44px; line-height: 44px;） - 避免
padding干扰：若设了padding-top和padding-bottom，height值需包含它们，否则实际高度会超预期 - 用
box-sizing: border-box可简化计算
td/th 直接设 min-height 为什么无效
td 和 th 属于「replaced inline-level 元素」的变体，CSS 规范明确限制 min-height 对这类元素不生效。你在开发者工具里看到样式被标记为“已应用”，但 computed 值仍是 auto —— 这是标准行为，不是渲染异常。
强行绕过的方法（不推荐）：
- 设
display: block→ 破坏表格语义，vertical-align失效，需要额外处理对齐 - 设
display: table-cell→ 它本来就是这个值，写上去等于没写 - 用
padding-top+padding-bottom撑开 → 有效但不是真正意义上的“最小高度”，内容少时成立，内容多时无法约束下限
真正可控的路径只有两条：走 table-layout: fixed + tr min-height，或放弃“最小”语义，用 line-height + height 锁定单行。
复杂点在于：表格嵌套在 flex 或 grid 容器里时，table-layout: fixed 依然有效，但父容器若设了 max-height 或 overflow: hidden，可能截断内容——这时 min-height 就成了摆设，得同步检查外层约束。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
