tfoot必须位于thead之后、tbody之前，且内部只能嵌套tr元素，否则导致DOM结构非法、打印错页、屏幕阅读器跳过；其语义仅为整表汇总行，不可用于脚注或样式控制。
直接用 tfoot 标签，但必须写在 thead 之后、tbody 之前，且内部只能套 tr，不能直接放 td 或文本——否则打印错页、滚动错位、屏幕阅读器跳过，不是“看起来没效果”，而是 DOM 结构非法。
tfoot 必须写在 tbody 前面，顺序错了就失效
HTML 规范强制要求顺序是 thead → tfoot → tbody。这不是“推荐写法”，而是浏览器行为前提：
- 打印多页表格时，只有前置的
tfoot才会在每页底部重复出现；后置则只出现在最后一页 -
tbody { max-height: 300px; overflow-y: auto; }要生效，依赖tbody是独立语义块——tfoot混在后面会破坏这个结构 -
tr:nth-child(odd)这类选择器会把tfoot的行算进总行数；顺序错乱会导致隔行变色错位 - 异步加载大量数据时，浏览器能提前渲染
tfoot（比如“总计 ¥7,900”），提升首屏感知
tfoot 里不能直接写 td，必须用 tr 包一层
tfoot 是行容器，不是单元格容器。常见错误是省略 tr：
<tfoot> <td>合计</td> <td>¥7900</td> </tfoot>
这会导致 DOM 解析异常：浏览器可能把 td 提升到 table 根级，table.tFoot 返回 null，屏幕阅读器跳过整行。
立即学习“前端免费学习笔记（深入）”；
正确写法只有一种：
<tfoot>
<tr>
<th scope="row">合计</th>
<td>24</td>
<td>¥1,200.00</td>
</tr>
</tfoot>-
th加scope="row"是给辅助技术用的，比纯td更可访问 - 列数必须和
thead及所有tbody tr严格一致；少一列或多一列都会错位 - 别用
colspan="100%"强行居中——语义错位，响应式下文字溢出或换行失控
动态更新合计值，别替换整个 tfoot
用 JavaScript 填充或刷新合计数时，替换整个 tfoot 元素会丢事件监听、中断焦点、破坏 SSR 渲染一致性。
应该定位已有单元格再更新内容：
const footerRow = document.querySelector('tfoot tr');
footerRow.cells[0].textContent = '合计';
footerRow.cells[1].textContent = totalItems;
footerRow.cells[2].textContent = formatCurrency(totalAmount);- 前提是 HTML 中
tfoot已存在且结构合法（含tr） - 数字列建议加
class="amount"，比靠索引更健壮；避免用parseInt()，改用Number()或parseFloat()并校验有效性 - 浮点误差要处理，比如
(0.1 + 0.2).toFixed(2)，别直接拼接字符串
想放脚注？tfoot 不是干这个的
tfoot 的语义是“整表汇总行”，不是“脚注容器”。塞“* 数据来源：2024 年统计”这类说明文字进去，会导致：
- HTML 验证失败（
tfoot内部只允许tr） - 打印时只在最后一页显示，而非每页底部
- 屏幕阅读器误读为行标题，而不是备注
- CSS
position: sticky对tfoot支持极差，滚动时容易错位
真正需要脚注，就放在 </table> 后面：
<table> <thead></thead> <tfoot></tfoot> <tbody></tbody> </table> <div class="table-footnote"> <small>* 数据截至 2026-07-08；† 含增值税</small> </div>
复杂点在于：很多人试图让 tfoot 承担脚注、汇总、样式控制三重角色，结果三者全崩——它只该做一件事：声明“这是整张表的汇总信息”，其余交给 CSS 和外部容器。
