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