<tfoot>的height属性无效，因HTML规范不支持该属性，浏览器直接忽略；实际高度由其内部<td>/<th>的height、line-height、padding、box-sizing等CSS属性共同决定。
直接给 <tfoot> 设 height 没用 —— 浏览器根本不认这个属性，必须用 CSS 控制单元格。
为什么 <tfoot> 的 height 属性无效
HTML 规范里 <tfoot> 本身不支持 height 属性；即使写上 <tfoot height="60px">，所有现代浏览器都会忽略。真正起作用的是它内部的 <tr> 和 <td>/<th> 元素的高度渲染逻辑。
常见错误现象：在 <tfoot> 上加 style="height: 50px"，结果高度完全没变化，甚至内容被截断或撑开。
-
<tr>在表格上下文里对height支持极差（Chrome 完全无视，Firefox 行为不稳定） - 最终高度由
<td>或<th>的height+line-height+padding+box-sizing共同决定 - 如果
<tfoot>里只有一行，那这行的实际高度就等于该行所有单元格中“最高那个”的计算高度
<td> 和 <th> 高度设置实操要点
要稳定控制表尾高度，必须把样式落到单元格上，并统一关键参数。
立即学习“前端免费学习笔记（深入）”；
- 给
<tfoot> td, <tfoot> th设置固定height（如height: 48px） - 配套设
line-height: 48px（单行文本垂直居中） - 强制
box-sizing: border-box，避免padding撑高 - 显式清空默认
padding：padding: 0，或按需设为对称值（如padding: 12px 16px） - 禁用
vertical-align: baseline默认值，改用vertical-align: middle
示例 CSS：
<style>
tfoot td,
tfoot th {
height: 48px;
line-height: 48px;
padding: 0 16px;
box-sizing: border-box;
vertical-align: middle;
}
</style>需要滚动时怎么让 <tbody> 可滚而 <tfoot> 固定
这是典型“表头/表尾固定、中间滚动”布局。核心是打破表格默认渲染流 —— <table> 本身不能直接设 overflow，但可以分别控制 <tbody> 和 <tfoot> 的显示行为。
- 给
<tbody>设display: block+max-height: 300px+overflow-y: auto - 给
<tfoot>保持display: table-row-group（默认值），并确保其子<tr>内单元格高度可控（见上一条） - 注意：一旦
<tbody>变成block，列宽可能错位，需配合table-layout: fixed和显式width或min-width控制
关键 CSS 片段：
<style>
table {
table-layout: fixed;
width: 100%;
}
tbody {
display: block;
max-height: 300px;
overflow-y: auto;
}
tfoot tr {
display: table-row; /* 确保恢复表格行行为 */
}
</style>rowspan 与表尾高度冲突怎么办
当 <tfoot> 中某个 <td> 使用了 rowspan，它会跨多行占据空间，但此时它的高度不再只由自身控制，而是受所在列所有单元格（包括 <tbody> 中的）共同影响。结果常表现为表尾被拉高、无法压缩。
- 优先避免在
<tfoot>里用rowspan—— 表尾语义上就是汇总行，通常单行足矣 - 若必须用，需同步约束同一列中
<tbody>所有单元格的max-height和overflow，否则高度会被最长内容撑开 - 更稳妥的做法：不用
rowspan，改用colspan合并列，再通过 CSSgrid或flex布局模拟跨行视觉效果
容易被忽略的一点：哪怕你把 <tfoot> 单元格设成 height: 0，只要它所在的列里某处有大段文本或图片，整列高度仍会被顶起来 —— 表格列宽/高是全局对齐的，不是局部独立的。
