HTML表格高度不能仅靠height属性硬设，百分比需父容器显式设高；推荐用CSS的height+min-height组合，单元格高度控制优于行高，视口单位比百分比更可靠。
HTML表格高度不能只靠 height 属性硬写，尤其用百分比时大概率失效——因为浏览器需要明确的父容器高度才能计算百分比值，而多数父元素默认高度为 auto。
直接在 <table> 上设 height 属性行不行？
可以设，但效果不稳定：
-
<table height="300px">会生效，但这是过时的 HTML 属性，W3C 已废弃，不推荐用于新项目 -
<table height="50%">几乎总无效——除非<body>和所有中间父容器（比如<div>）都显式设置了height，否则浏览器无参照可算 - 即使设了，
<tr>或<td>内容撑高后，<table>高度仍可能被突破（尤其是未设overflow或box-sizing）
用 CSS 的 height、min-height 还是 max-height？
优先用 height + min-height 组合，避免内容被截断：
-
height: 300px强制固定高度，适合已知数据量且不允许拉伸的场景 -
min-height: 300px更安全：内容少时保持最小高度，内容多时自动撑开，不会隐藏溢出内容 -
max-height: 300px必须配合overflow: auto才有用，否则超出部分直接被裁掉，且滚动条出现在表格内部而非整表外侧 - 别对
<tr>直接设height，它对布局影响弱；真正起效的是给<td>或<th>设height+line-height+vertical-align: middle
百分比高度到底该怎么用才可靠？
百分比高度不是“不能用”，而是必须满足链式依赖：
立即学习“前端免费学习笔记（深入）”；
- 从
<html>开始，每一层父容器都要设height或min-height，例如：html, body { height: 100%; }，再加一层包裹<div class="table-container">并设height: 100vh或height: 500px - 更稳妥的做法是放弃百分比，改用视口单位：
height: 60vh表示占视口高度 60%，无需层层设父高 - 若需响应式缩放，用
height: clamp(200px, 40vh, 600px)比纯百分比更可控 - 注意：Firefox 对
<table>的百分比高度支持略差，实测中常需额外加display: block或border-collapse: collapse才稳定
表格行高和单元格高度怎么精确控制？
靠 <tr> 设高度容易失效，真正可控的是单元格：
- 给
td, th设height: 48px+line-height: 48px+vertical-align: middle，文字垂直居中才真正居中 - 如果某列内容换行，
height会被撑开，此时应改用min-height: 48px并配padding控制内边距 - 奇偶行不同高度？用
tr:nth-child(odd) td { height: 36px; }，但务必同时重置line-height，否则文字错位 - 合并单元格（
rowspan）后，该单元格高度会影响整行，建议统一用 CSS 控制，避免混用 HTML 属性和 CSS
最易被忽略的一点：表格高度最终由内容、盒模型、字体大小、行高、边框和 padding 共同决定。哪怕写了 height: 200px，只要里面一个 <img> 没设 max-width: 100% 或 height: auto，就可能把整行顶高。调高度前，先检查所有子元素是否“守规矩”。
