table元素上直接设min-height无效，因css规范明确限制其对table不生效；可靠方案是table设table-layout:fixed+width，再在tr上设min-height。
table 元素上直接设 min-height 为什么无效
因为 table 是「置换内联级元素」的特殊块级容器，CSS 规范明确限制 min-height 对它不生效（哪怕你写了 table { min-height: 300px; }，Chrome/Firefox 都会忽略）。这不是浏览器 bug，是标准行为。真正起作用的是：给 table 设固定布局 + 在 tr 上设 min-height，或者用 height + overflow 组合兜底。
table-layout: fixed + tr 的 min-height 才可靠
这是目前兼容性最好、语义最正的方案，IE8+ 和所有现代浏览器都支持。但有三个硬性前提必须同时满足：
-
table必须显式设置table-layout: fixed -
table必须有明确宽度（如width: 100%或具体像素值），否则固定布局无法计算列宽，tr的min-height会被跳过 -
min-height要写在tr上，不是td或table——tr { min-height: 48px; }才生效 - 避免同时写
height和min-height在同一tr上，height会覆盖min-height
示例：
table {
table-layout: fixed;
width: 100%;
}
tr {
min-height: 48px;
}
td, th {
padding: 8px 12px;
vertical-align: middle;
}
td 和 th 上 min-height 永远不生效
直接写 td { min-height: 60px; } 是徒劳的。表格单元格属于替换内联级元素变体，规范禁止 min-height 对其起效。常见误操作包括：
- 试图用
display: block强转td—— 会破坏表格语义，导出 Excel 或屏幕阅读器识别异常 - 只靠
line-height+padding撑高 —— 视觉上像“最小高度”，但内容超长时仍可能塌缩（比如多行文本换行后行高被重置） - 嵌套
div在td里再设min-height—— 多一层 DOM，且需额外控制div的垂直居中
如果真要保语义又需视觉高度，优先用 tr + table-layout: fixed；若只需简单撑开，padding-top + padding-bottom 更轻量。
滚动区域里表格最小高度容易失效
当表格放在 overflow-y: auto 容器中，设了 min-height 却没出现滚动条，大概率是忘了设容器的 height。min-height 只管“至少多高”，不管“最多显示多少”——滚动依赖的是 height + overflow 的组合。
- 正确写法：
.scroll-table { height: 400px; min-height: 200px; overflow-y: auto; } - 如果父容器是
flex，确认没加align-items: center，否则会干扰子项高度计算 - 移动端 Safari 中，
100vh在地址栏收放时会跳变，min-height: 100dvh更稳，但仅 Chrome 105+/Safari 16.4+ 支持
最常被忽略的一点：表格本身没有内容时，tr 的 min-height 依然生效；但一旦内容撑高，tr 就会自动扩展——这个“下限+自适应”的行为，才是 min-height 的真实价值所在。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
