直接给加height属性不是最小高度，而是初始建议高度；min-height对无效，需通过包裹div设min-height或使用table-layout:fixed配合tr的min-height实现；表格撑满容器且至少两行应控制父容器flex布局及tbody样式；移动端用100dvh保底更可靠。
直接给 <table> 加 <code>height 属性不等于“最小高度”
HTML 的 height 属性（如 <table height="300">）本质是“初始建议高度”，不是 CSS 的 <code>min-height。浏览器会把它当做一个软性提示：内容少时可能撑不满，内容多时一定突破——它不设下限，只影响初始渲染，且在现代 HTML5 中已属过时用法，语义和可维护性都差。
min-height 在 <table> 上无效？原因和绕过方式
<p>直接写 <code>table { min-height: 300px; } 在多数浏览器里不起作用，因为 <table> 是「表格格式化上下文」的根元素，其高度由内部行高、单元格内容和布局模式共同决定，<code>min-height 被规范限制为不生效。
- 真正能起效的路径只有两个：改父容器约束，或改表格内部结构
- 最稳妥的做法是用
div 包裹 <table>，对这个 <code>div 设 min-height + overflow: hidden 或 overflow-y: auto
- 若必须让表格自身“视觉上不低于某高度”，可用
table-layout: fixed 配合 tr { min-height: 48px; }，但前提是 table 有明确宽度（如 width: 100%），否则固定布局无法计算列宽，min-height 也会被忽略
想让表格“撑满容器但至少显示两行”，该设谁的高度？
常见场景：表格嵌在 flex 容器里，希望它占满剩余空间，又不能塌成一行。这时不要碰 <table> 自身的 <code>min-height，而应控制它的父级：
- 父
div 设 display: flex; flex-direction: column;
- 表格本身设
flex: 1;，并加 min-height: 120px;（对应两行预估高度）
- 同时确保
tbody 不被压缩：加 tbody { display: block; max-height: 100%; overflow-y: auto; }，这样内容超限时才滚动，不超时就自然撑开
- 注意：如果
thead 和 tbody 分离滚动，需额外设 thead { position: sticky; top: 0; } 并保证父容器有 position: relative
移动端 Safari 下 100vh 失准，表格最小高度怎么保底？
当表格需要“至少占满视口高度”时，min-height: 100vh 在 iOS Safari 中可能因地址栏缩放误算为“初始视口”，导致表格实际高度偏小。更稳的写法是：
- 不用
vh 直接设表格，而是设它的包裹层：.table-wrapper { min-height: 100dvh; }（dvh 是动态视口单位，2023 年起已广泛支持）
- 降级方案：用 JS 补充一次高度计算：
element.style.minHeight = window.innerHeight + 'px';，并在 resize 事件中更新
- 绝对不要混用
height: 100% 和 min-height: 100vh，前者依赖父级高度，后者依赖视口，冲突时以 height 为准，反而压死伸缩空间
真正麻烦的从来不是设一个数字，而是弄清这个数字到底要约束谁、在什么上下文里生效——表格的高度行为，永远是父子关系、布局模式和内容流动共同作用的结果，单点设置大概率失效。
div 包裹 <table>，对这个 <code>div 设 min-height + overflow: hidden 或 overflow-y: auto
table-layout: fixed 配合 tr { min-height: 48px; }，但前提是 table 有明确宽度（如 width: 100%），否则固定布局无法计算列宽，min-height 也会被忽略想让表格“撑满容器但至少显示两行”，该设谁的高度？
常见场景：表格嵌在 flex 容器里，希望它占满剩余空间，又不能塌成一行。这时不要碰 <table> 自身的 <code>min-height，而应控制它的父级：
- 父
div设display: flex; flex-direction: column; - 表格本身设
flex: 1;，并加min-height: 120px;（对应两行预估高度） - 同时确保
tbody不被压缩：加tbody { display: block; max-height: 100%; overflow-y: auto; }，这样内容超限时才滚动，不超时就自然撑开 - 注意：如果
thead和tbody分离滚动，需额外设thead { position: sticky; top: 0; }并保证父容器有position: relative
移动端 Safari 下 100vh 失准，表格最小高度怎么保底？
当表格需要“至少占满视口高度”时，min-height: 100vh 在 iOS Safari 中可能因地址栏缩放误算为“初始视口”，导致表格实际高度偏小。更稳的写法是：
- 不用
vh直接设表格，而是设它的包裹层：.table-wrapper { min-height: 100dvh; }（dvh是动态视口单位，2023 年起已广泛支持） - 降级方案：用 JS 补充一次高度计算：
element.style.minHeight = window.innerHeight + 'px';，并在resize事件中更新 - 绝对不要混用
height: 100%和min-height: 100vh，前者依赖父级高度，后者依赖视口，冲突时以height为准，反而压死伸缩空间
真正麻烦的从来不是设一个数字，而是弄清这个数字到底要约束谁、在什么上下文里生效——表格的高度行为，永远是父子关系、布局模式和内容流动共同作用的结果，单点设置大概率失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
