tfoot必须是table直接子元素且顺序为thead→tbody→tfoot，其tr内td/th数量须与tbody严格对齐，js需监听tbody变化动态更新内容，打印与读屏行为差异大，不可滥用隐藏。
tfoot 必须紧挨着 tbody，不能放在 tr 之后再加
很多新手把 tfoot 当成普通容器随便放，结果浏览器直接忽略或错乱渲染。它必须是 <table> 的直接子元素，且顺序只能是：<code>thead → tbody → tfoot（caption 和 colgroup 可前置）。如果写成 <tbody><tr>...</tr></tbody>
<tfoot>...</tfoot> 是合法的；但若在 tbody 内部插一个 tfoot，或者把它放在 thead 前面，就会被浏览器静默修正——可能移到表末，也可能丢弃样式。
tfoot 里的单元格要和 tbody 列数严格对齐
哪怕只是汇总一行，tfoot 中的 <tr> 也必须包含与 <code>tbody 相同数量的 <td> 或 <code><th>，否则会出现列错位、宽度塌陷，甚至某些浏览器（如旧版 Safari）会把缺失列补空单元格导致样式混乱。
<ul><li>如果 <code>tbody 每行有 4 个 <td>，<code>tfoot 就得写 4 个，哪怕其中 3 个是空的或用 <td colspan="3"> 合并
<li>用 <code>colspan 时，务必算清跨列总数等于总列数，比如 4 列表格中 <td colspan="4">总计</td> 没问题，但 <td colspan="5"> 会导致右侧溢出空白
<li>避免混用 <code><th> 和 <code><td> 在同一行里，语义不一致容易触发可访问性警告（如 axe 工具报 <code>aria-table-missing-header）
tfoot 不会自动计算数据，JS 汇总需监听 tbody 变化
tfoot 只是结构容器，不带任何计算逻辑。想动态更新底部汇总，得靠 JS 手动读取 tbody 数据并写入 tfoot。常见疏漏是只在页面加载时算一次，后续增删行却不刷新汇总。
- 推荐监听
tbody的DOMSubtreeModified（兼容性好）或更现代的MutationObserver，捕获tr增删 - 遍历
tbody.querySelectorAll('tr')，对每行第 2、3 列（假设是数值）调用parseFloat()累加，跳过非数字内容 - 写回
tfoot td:nth-child(2)时注意保留原有格式，比如带千分位的数字别直接覆盖成纯数字 - 避免在循环里反复操作 DOM，先拼好字符串或用
DocumentFragment统一替换
打印和屏幕阅读器对 tfoot 的处理差异很大
桌面浏览器打印时，tfoot 默认每页底部重复（类似 thead 每页顶部重复），但这个行为不可靠：Chrome 有时只在第一页显示，Firefox 需要配合 @media print 显式设置 display: table-row-group 才生效。而屏幕阅读器（NVDA、VoiceOver）通常把 tfoot 内容放在表格末尾朗读，但如果用了 aria-hidden="true" 或 display:none 就彻底跳过。
- 不要依赖
tfoot实现“每页底部固定汇总”，真正需要分页汇总得用后端或 PDF 生成 - 若汇总行含关键信息（如订单总额），务必保留语义：用
<th scope="row">合计</th>而不是<td>，并确保 <code>role="rowgroup"未被覆盖 - CSS 中慎用
tfoot { visibility: hidden }—— 这会让屏幕阅读器仍读取内容，造成误导；真要隐藏请用display: none或aria-hidden="true"
实际项目里，
tfoot 最容易被当成“装饰性底部”，结果发现打印不出现、JS 更新不同步、读屏软件念错顺序——它不是语法糖，是表格语义链里真实的一环，松一点就断。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
