td/th 的 min-height 无效是 css 规范限制，非浏览器 bug；可靠方案是 table-layout: fixed + table 宽度 + tr 上设 min-height；轻量替代是 line-height 加 padding；display 重设风险大，flex 环境中需 align-self: flex-start。
td/th 直接写 min-height 为什么无效
这不是浏览器 bug，是 CSS 规范明确限制：td 和 th 属于「replaced inline-level 元素」的变体，min-height 对它们不生效。你写了 td { min-height: 48px; }，但单行文字时高度仍塌缩——这是标准行为，不是渲染异常。
table-layout: fixed + tr 上设 min-height 最可靠
这是唯一兼顾语义、兼容性和稳定性的方案，IE8+ 和所有现代浏览器（Chrome/Firefox/Safari/Edge）都支持。关键有三点：
- 必须给
table显式设置table-layout: fixed -
table必须有明确宽度（如width: 100%或具体像素），否则固定布局无法计算列宽，进而影响tr的高度渲染 -
min-height写在tr上，不是td；tr会把最小高度分摊到所有单元格
示例：
table {
table-layout: fixed;
width: 100%;
}
tr {
min-height: 48px;
}
td, th {
padding: 8px 12px;
vertical-align: middle;
}
line-height + padding 是更轻量的视觉替代方案
如果你的目标只是“让单行文本的单元格看起来不低于某高度”，而不是响应内容动态增长（比如多行文本自动撑高），那 line-height 比 min-height 更省心：
- 兼容性极好，连 IE6 都支持
- 无需改
table-layout，不破坏表格默认流式行为 - 配合
padding和vertical-align: middle能精准控制垂直居中效果 - 注意：
line-height值需大于字体大小 + 上下padding总和，否则视觉高度仍不足
例如希望视觉高度 ≈ 44px，字体 14px，上下 padding 各 8px，则 line-height: 28px（44 − 8 − 8）即可。
display: table-cell 强制重设类型风险大
有人尝试给 td 加 display: block 或 display: table-cell 来绕过限制，但实际问题不少：
-
display: block会破坏表格结构语义，单元格不再对齐，边框错位，border-collapse失效 -
display: table-cell是td默认值，加了等于没加；若从其他 display 类型改回来，需同步处理vertical-align和父级table-row环境 - 在 flex 或 grid 容器里嵌套表格时，这种强制修改更容易引发布局冲突
除非你完全放弃原生表格语义、用 div 模拟表格，否则这条路不推荐。
真正容易被忽略的是：哪怕用了table-layout: fixed，如果表格嵌套在 display: flex 容器里且父容器没设高度约束，tr 的 min-height 依然可能失效——因为 flex 子项默认拉伸（align-items: stretch），会覆盖最小高度。此时得给 tr 单独加 align-self: flex-start。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
