tfoot 必须位于 tbody 前面且仅嵌套 tr，这是 html 规范强制的 dom 顺序（thead→tfoot→tbody），确保页脚正确渲染、打印分页、样式计算及无障碍访问；内部必须用 tr 包裹 td，禁止省略 tr 或使用废弃 html 属性。
tfoot 必须写在 tbody 前面，且内部只能嵌套 tr，否则不是“布局问题”，而是 HTML 结构非法——浏览器可能忽略、错位、或导致 table.tFoot 返回 null。
tfoot 为什么必须放在 tbody 前面
这不是样式或视觉习惯，是 HTML 规范强制的 DOM 顺序：thead → tfoot → tbody。浏览器据此提前渲染页脚（比如“总计 ¥7900”），哪怕 tbody 数据还在加载或分页拉取中。
- 打印多页表格时，只有按此顺序写的
tfoot才会出现在每一页底部；后置则只在最后一页显示 -
tbody { max-height: 300px; overflow-y: auto; }要生效，依赖tbody是独立语义块——而这个前提就是tfoot不混在其中 - 某些 CSS 选择器如
tr:nth-child(odd)会把tfoot的行计入总行数；放错位置会导致奇偶样式错乱
tfoot 内部不能直接写 td，必须用 tr 包裹
tfoot 是行容器，不是单元格容器。常见错误是省略 tr，直接往里塞 td 或文本：
<tfoot> <td>合计</td> <td>¥7900</td> </tfoot>
这会导致解析异常：浏览器可能把 td 提升到 table 顶层，破坏表格结构，table.tFoot 可能为 null，屏幕阅读器也会跳过。
- 正确写法必须带
tr：<tfoot><tr> <td>合计</td> <td>¥7900</td> </tr></tfoot> - 需要多行页脚（如“合计”+“含税”+“数据截至…”）？写多个
tr，不要用colspan强撑单行 - 所有
tr的列数必须与thead和tbody对齐，否则可能错列
tfoot 样式要用 CSS 控制，HTML 属性已失效
HTML5 已废弃 align、valign、char 等属性，硬写进去浏览器会忽略：
<tfoot align="right">...</tfoot><!-- ❌ 无效 -->
对齐、颜色、边框等全部走 CSS：
- 水平对齐：
tfoot td { text-align: right; }或tfoot th { text-align: left; } - 垂直对齐：
tfoot td { vertical-align: middle; }（注意：加在td上，不是tfoot元素本身） - 顶部加粗边框（常用于区分汇总行）：
tfoot td { border-top: 2px solid #dee2e6; font-weight: bold; } - 移动端小屏下建议用
@media把统计行改为块状堆叠，避免横向溢出
JavaScript 动态更新 tfoot 时别替换整个元素
直接 innerHTML = "" 或 replaceChild 整个 tfoot，会丢失事件监听、焦点状态，且 SSR/SEO 渲染不一致。
- 稳妥做法是只更新单元格内容：
document.querySelector('tfoot tr').cells[1].textContent = '¥420'; - 如果要批量更新，优先用
querySelectorAll('tfoot td')遍历赋值，而非重写 HTML 字符串 - 检查
tFoot是否存在再操作：if (table.tFoot) { ... }，避免报错
最容易被忽略的一点：即使你只是想加一行“数据截至 2026-05-25”的备注，只要没用 tr 包裹，就不是合法 tfoot；而一旦用了，它就不再是普通备注，而是语义上属于整张表的固定页脚信息——浏览器和辅助技术都会按此理解它。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
