td/th上min-height无效是css规范限制，因其属replaced inline-level元素；可靠方案为table-layout:fixed+tr的min-height，或用line-height+height模拟视觉最小高度。
td 或 th 上直接写 min-height 为什么无效
这不是浏览器 bug，而是 CSS 规范明确规定的限制：td 和 th 属于「replaced inline-level 元素」的变体，min-height 对它们不生效。你在 Chrome/Firefox 里加了 td { min-height: 60px; }，但单行文字时高度依然塌缩——这是标准行为，不是渲染异常。
常见错误现象包括：表格看起来“被压扁”，内容垂直居中失效，或在不同浏览器中表现不一致（比如 Safari 偶尔“似乎生效”，实为巧合）。
- 不要指望
min-height在td/th上起作用，无论加!important还是换单位（px/em/%）都无效 -
height在td上虽能强制设高，但会压制内容撑开行为，不适合动态数据场景 -
tr上设min-height同样无效，除非配合table-layout: fixed
table-layout: fixed + tr 的 min-height 是最可靠方案
这个组合在 IE8+ 到最新 Safari/Chrome/Firefox 都稳定可用，关键是它尊重表格语义，且不破坏列宽计算逻辑。
必须同时满足三个条件，缺一不可：
-
table必须显式设置table-layout: fixed -
table必须有明确宽度（如width: 100%或具体像素值），否则固定布局无法初始化列宽，进而导致tr的min-height被忽略 -
min-height必须写在tr上，不能写在td或table上
示例：
table {
table-layout: fixed;
width: 100%;
}
tr {
min-height: 48px;
}
td, th {
padding: 8px 12px;
vertical-align: middle;
}
注意：min-height 只设下限，内容多时行会自动增高；不要和 height 同时用在 tr 上，后者会覆盖前者。
用 line-height + padding 实现视觉最小高度
如果你的目标只是让单行文本单元格“看起来不低于某高度”，且内容基本不换行、不含图片或内联块元素，这条路径更轻量、兼容性更好（IE7+ 全支持）。
原理是：用 line-height 锁定文本行距，再靠 padding 补足上下空间，height 仅作兜底。
- 设
line-height和height相等（如都是44px），可确保单行文本垂直居中 -
padding设为0，避免叠加撑高；若需留白，改用padding-top/padding-bottom微调 - 慎用无单位
line-height（如1.5），它会随字体大小变化，推荐用px或em
示例：
td, th {
line-height: 44px;
height: 44px;
padding: 0;
vertical-align: middle;
}
嵌套在 Flex 容器里的表格怎么处理
当 table 被包在 display: flex 的父容器中时，table-layout: fixed 仍有效，但容易被父容器截断高度——尤其是父容器设了 max-height 或 overflow: hidden。
关键检查点：
- 确认父容器没有设置
height或max-height，否则表格会被硬性裁剪 - 如果父容器是
flex，确保其align-items不是flex-start（可能让表格“贴顶”，误判为高度不足） -
tr的min-height在 flex 环境下不会触发父容器拉伸，需靠表格自身内容或显式min-height在table上兜底
真正容易被忽略的是：表格内部行高控制逻辑和外部布局容器的交互关系——它不像普通块级元素那样响应 flex 的主轴对齐规则，必须单独验证渲染结果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
