tfoot必须写在tbody前面，这是HTML规范强制要求的顺序；否则浏览器会自动重排DOM，导致CSS选择器失效、JS获取节点异常、打印错乱及屏幕阅读器误读。
tfoot 是 HTML 中唯一合法用于定义表格页脚的标签，但它必须放在 tbody 之后、table 结束前，且不能和 thead 或 tbody 的顺序颠倒——否则浏览器会自动重排 DOM，导致样式或脚本行为异常。
为什么 tfoot 必须写在 tbody 前面？
这是 HTML 规范的强制要求：合法的 table 结构中，tfoot 元素必须出现在 tbody 之前（哪怕视觉上它显示在底部）。浏览器渲染时会自动将其“挪”到表格底部，但源码顺序错误会导致：
- 部分旧版 Safari 或 IE 可能忽略
tfoot样式 - 用
document.querySelector('tfoot')能取到元素，但table.tFoot属性可能为null - CSS 中
tfoot + tbody这类相邻选择器完全失效
正确结构示例：
<table>
<thead><tr><th>姓名</th><th>分数</th></tr></thead>
<tfoot><tr><td>合计</td><td>876</td></tr></tfoot>
<tbody>
<tr><td>张三</td><td>92</td></tr>
<tr><td>李四</td><td>88</td></tr>
</tbody>
</table>
tfoot 里能放什么内容？
tfoot 只接受 tr 作为直接子元素，而 tr 内只能用 td 或 th。常见误用包括：
立即学习“前端免费学习笔记（深入）”；
- 在
tfoot里嵌套div、p或自定义组件 —— 浏览器会把它“踢出”table结构，变成孤立节点 - 用
colspan跨列没问题，但rowspan在tfoot中多数浏览器不支持垂直合并 - 想加按钮或链接？可以，但必须包在
td里，例如：<td><a href="#">导出</a></td>
如何让 tfoot 在长表格中始终可见？
默认情况下，tfoot 只在表格底部渲染一次。如果希望它像表头一样固定在滚动区域底部（比如表格高度受限、内容溢出），纯 CSS 无法实现——position: sticky 对 tfoot 无效。可行方案只有：
- 用 JavaScript 监听表格滚动，动态计算并设置
tfoot的transform: translateY(...) - 放弃语义化
tfoot，改用普通div模拟页脚，并通过aria-labelledby等方式维持可访问性 - 服务端分页时，在每页末尾手动插入含汇总数据的
tr，不依赖tfoot
注意：CSS Grid 或 Flexbox 布局下，tfoot 完全不适用——它们不识别表格语义，此时应重构为非表格结构。
真正容易被忽略的是：当表格通过 JS 动态生成时，如果先 append tbody 再 append tfoot，DOM 顺序就错了。必须按规范顺序构造 fragment，或者用 insertBefore 显式插入到 tbody 之前。
