tfoot必须写在tbody之前，因为HTML规范强制要求thead→tfoot→tbody的DOM顺序，以确保浏览器正确渲染、打印分页、可访问性及JS DOM一致性；顺序错误会导致脚本读取异常、CSS失效和旧版Safari渲染问题。
为什么 <tfoot> 必须写在 <tbody> 之前？
浏览器解析表格时按 DOM 顺序处理：先 <thead>，再 <tfoot>，最后 <tbody>。如果把 <tfoot> 放在 <tbody> 后面，它会在渲染时被“推”到表格底部，但 DOM 结构错乱会导致脚本读取行数据出错、CSS 选择器失效，甚至某些旧版 Safari 渲染异常。
- 必须按 <thead> → <tfoot> → <tbody> 的顺序书写
- 即使视觉上页脚在底部，HTML 源码里它就得排中间
- 用 document.querySelector('tfoot tr') 取不到元素？先检查是否顺序错了
如何让 <tfoot> 里的合计行正确跨列对齐？<tfoot> 中的 <tr> 默认按列数匹配，但汇总行常需合并多列。关键不是加 colspan，而是确保它与 <thead> 和 <tbody> 的列结构一致。
- 先数清表头有几列（比如 <th> 共 5 个），汇总行就用 1 个 <td colspan="5"> 或 5 个独立 <td>
- 若用了 <colgroup> 定义列宽，<tfoot> 内单元格仍要严格对应列数，否则 Firefox 会错位
- 示例：
<tfoot>
<tr>
<td colspan="3">总计</td>
<td><strong>¥12,450</strong></td>
<td><strong>¥8,920</strong></td>
</tr>
</tfoot>
<tfoot> 在滚动表格中为何不随内容滚动？
当给 <table> 父容器设 overflow-y: auto 且高度固定时，<tfoot> 默认会跟着整个表格一起滚动——这不是 bug，是规范行为。要实现“页脚悬浮在滚动区底部”，必须绕开原生 <tfoot>。
- 原生 <tfoot> 无法脱离表格流做 sticky 定位
- 替代方案：去掉 <tfoot>，用一个独立 <div class="table-footer"> 紧贴表格下方，再用 CSS position: sticky + bottom: 0
- 注意：此时需手动同步列宽（靠 JS 监听 th 宽度或用 table-layout: fixed）
- 不要用 display: table-footer-group 强制模拟，IE11 以外基本不支持
用 JavaScript 动态更新 <tfoot> 数据时要注意什么？
直接操作 <tfoot> 内容没问题，但若涉及重绘（比如每秒刷新金额），频繁 innerHTML 赋值会导致表格重排，卡顿明显。
- 优先用 textContent 更新纯文本，比 innerHTML 快且安全
- 修改前先缓存 tfoot.querySelector('td:nth-child(4)')，避免重复查询
- 如果汇总逻辑复杂（如求平均值、过滤后统计），别在每次 input 事件里全量重算，加防抖或只监听关键字段
- 切记：修改 <tfoot> 不会触发 table 的 resize 事件，宽度变化需手动 dispatch
表格页脚真正的麻烦不在写法，而在列对齐和滚动场景下的行为预期——多数人以为 <tfoot> 天然“固定在底部”，其实它只是语义上的页脚，视觉位置完全依赖 CSS 和 DOM 顺序。
