tr 的 height 和 min-height 属性无效，因其不支持高度约束；应改用 td/th 的 min-height、line-height 或 padding 控制行高，或通过 table-layout: fixed 配合 tr 的 min-height 实现兼容性方案。
table-row 的 height 属性无效？用 min-height 替代
直接给 <tr> 设置 <code>height 或 min-height 在多数浏览器中不会生效——<tr> 是表格行容器，不支持直接设置高度约束。真正起作用的是 <code><td> 或 <code><th> 的 <code>min-height，或通过 line-height + 内容撑开。
常见错误现象：tr { height: 40px; } 看起来没反应，尤其当单元格内容少、字体小、padding 小时，行高远低于预期。
- 用
td, th { min-height: 40px; vertical-align: middle; }更可靠 - 若需统一控制所有行，建议设在
tbody td或table td上，避免被个别单元格内容压缩 - 注意：
min-height对table-row无效，但对table-cell有效（这是关键区别）
line-height 比 height 更适合控制文字垂直居中
单纯靠 height 容易导致文字被截断或溢出，尤其配合 overflow: hidden 时。而 line-height 能自然撑开单元格，并让单行文本垂直居中。
使用场景：表头、操作列、状态标签等文字简洁且需整齐对齐的单元格。
-
td { line-height: 40px; padding: 0; }可让单行文字居中，且不依赖内容高度 - 若单元格可能含多行内容（如换行文本），
line-height不再适用，必须改用min-height+display: flex或vertical-align - 注意兼容性：
line-height在 IE8+ 和所有现代浏览器中行为一致，但若设为无单位数值（如line-height: 1.5），会继承计算，不推荐用于最小高度控制
border-collapse: collapse 下 padding 是主要高度来源
当表格启用 border-collapse: collapse（绝大多数业务表格都用这个），td 的 padding 成为影响行高的最直接、最可控因素。此时 height 和 min-height 往往被 padding “覆盖”。
容易踩的坑：开发者常忽略 padding 的累积效应，比如 padding: 8px 12px 已贡献 16px 垂直空间，再设 min-height: 24px 实际行高就变成 40px。
- 检查当前表格是否用了
border-collapse: collapse，可通过 DevTools 查看 computed styles 中的border-collapse值 - 统一控制行高，优先调整
td { padding-top: 10px; padding-bottom: 10px; }，比硬设min-height更稳定 - 若需精确像素控制，建议将
padding设为固定值，再用min-height补足剩余空间（例如padding: 12px; min-height: 36px;→ 最小内容区高 12px）
flex 布局替代方案：仅当需要复杂对齐时才考虑
如果表格语义不强（比如只是展示二维数据，不涉及排序、导出、屏幕阅读器需求），用 display: flex 模拟表格结构反而更容易控制最小行高。
性能与兼容性影响：Flex 表格在 IE11 中支持有限（需加 -ms- 前缀），且无法原生支持 colspan/rowspan，也不利于可访问性（role="table" 需手动补全）。
- 简单示例：
.row { display: flex; min-height: 48px; align-items: center; } - 不要为了“最小行高”强行把语义化表格改成 flex，除非你明确放弃表格语义和部分辅助功能
- 真实项目中，90% 的最小行高问题靠
td { min-height + padding + line-height }组合就能解决，无需架构级改动
最容易被忽略的一点：不同浏览器对 table-layout: fixed 下的 min-height 解析略有差异，尤其是 Safari 旧版本；如果遇到某列高度异常，先检查是否启用了 table-layout: fixed，并确保所有 th/td 都有显式 width 或 min-width。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
