tfoot必须写在tbody前面，是HTML规范强制要求的顺序（thead→tfoot→tbody），确保浏览器正确渲染、打印分页、可访问性及JS DOM一致性；它仅语义化包裹汇总行，不自动计算数据。
tfoot 本身不计算数据，它只是语义化地包裹表格底部的汇总行——你得自己算好再填进去，否则浏览器不会自动求和或统计。
为什么 tfoot 放在 thead 前面写却显示在底部？
这是 HTML 规范强制的行为：无论你在源码中把 tfoot 写在 thead 前、中、后，浏览器渲染时都会把它固定在表格底部（thead 在顶，tbody 在中，tfoot 在底）。这个顺序是硬编码的，不是靠 CSS 控制的。
所以必须这样写：
<table> <thead><tr><th>商品</th><th>销量</th></tr></thead> <tbody><tr><td>苹果</td><td>120</td></tr></tbody> <tfoot><tr><td>合计</td><td>120</td></tr></tfoot> </table>
如果把 tfoot 放在 tbody 后面再手动用 CSS order 或 flex 调序，会破坏语义和可访问性，屏幕阅读器可能跳过或误读。
立即学习“前端免费学习笔记（深入）”；
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
如何让 tfoot 的样式和 thead 一致又区别于 tbody？
直接给 tfoot 单独设样式最稳妥。常见需求包括加粗、背景色、边框强调。注意两点：
-
tfoot td, tfoot th要显式设置font-weight: bold，因为默认不是粗体 - 如果用了
border-collapse: collapse，tfoot的上边框可能被tbody最后一行“吃掉”，需额外加border-top - 某些旧版 Safari 对
tfoot tr的background-color渲染异常，建议直接设在td/th上
示例：
tfoot td {
font-weight: bold;
background-color: #f8f9fa;
border-top: 2px solid #dee2e6;
}
JavaScript 动态更新 tfoot 里的统计值时要注意什么？
不能只改 textContent，还得确保结构稳定——尤其是当表格支持排序、筛选或分页时，tfoot 容易被 JS 框架（如 Vue/React）意外移除或重复渲染。
实操建议：
- 用唯一
id标记tfoot中的统计单元格，比如<td id="total-sales">0</td>，JS 只更新这个节点 - 避免用
innerHTML = '...' + sum拼接，防止 XSS；优先用textContent - 如果统计依赖
tbody数据，记得在 DOM 更新后（比如requestAnimationFrame或框架的nextTick）再重算，否则读到的是旧值 - 服务端渲染（SSR）页面首次加载时，
tfoot的值应由后端生成，不要等 JS 执行完才填——否则用户看到空白或错误初始值
最常被忽略的一点：tfoot 是语义容器，不是计算引擎。它的价值在于告诉辅助技术“这行是汇总”，而不是帮你算数——该用 JS 算的，别指望浏览器代劳；该用 ARIA 标注的（比如 role="rowgroup"），别只靠视觉样式糊弄。
