tfoot不能当脚注容器，因其专用于表格汇总且需含tr元素；脚注应放table外的div或footer中，并用CSS控制打印与样式。
tfoot 不是用来放脚注的。真要加“* 数据来源：2024 年内部统计”这类说明，别往 tfoot 里塞——它会验证失败、打印错位、屏幕阅读器误读，而且改起来特别麻烦。
为什么tfoot不能当脚注容器用
浏览器和辅助技术把 tfoot 当作整张表的汇总区域，不是备注栏。硬塞脚注进去，直接触发三类问题：
- HTML 验证失败：
tfoot内部只允许tr，不能直接放p、div或纯文本 - 打印异常：多数浏览器只在最后一页底部显示后置或结构错误的
tfoot，不会每页重复 - 无障碍失效：屏幕阅读器可能跳过内容，或把“† 含税”当成行标题朗读
tfoot 的合法写法必须带 tr 且列数对齐
tfoot 是行容器，不是排版盒子。常见错误是省略 tr 直接写文字或单元格：
- ❌ 错误：
<tfoot>合计：¥1,200</tfoot>或<tfoot> <td>合计</td> <td>¥1,200</td> </tfoot> - ✅ 正确：
<tfoot><tr> <th scope="row">合计</th> <td>24</td> <td>¥1,200.00</td> </tr></tfoot> -
scope="row"告诉辅助工具这是行头，比空td更可访问 - 如果
thead有 4 列，tfoot的tr也必须有 4 个单元格（可用colspan合并，但总数不能少） - 别用
colspan="100%"居中——破坏列对齐，响应式下容易崩
真正脚注该放哪儿？用 div 或 footer 紧跟 table
需要超链接、换行、图标或多段落的脚注，就别绑在表格结构里：
立即学习“前端免费学习笔记（深入）”；
- 推荐写法：
<table>...</table><div class="table-footnote"><small>* 数据截至 2026-05-28；† 含增值税</small></div> - 用
small或自定义类控制字号/颜色，不污染语义 - 配合
@media print单独设间距，避免和表格边框粘连：@media print { .table-footnote { margin-top: 1em; } } - 若需更强语义，可用
<footer class="table-footer">，但注意它不属于表格 DOM，JS 查找要跨元素（比如table.nextElementSibling）
想让 tfoot 打印时每页底部出现？得用 display: table-footer-group
position: sticky 对 tfoot 基本无效。可靠方案是 CSS 控制渲染行为：
- 必须确保 HTML 结构合法：
thead→tfoot→tbody顺序，且三者都存在 - 禁用破坏表格盒模型的样式（比如
table { display: block }），否则table-footer-group失效 - 写法：
@media print { tfoot { display: table-footer-group; } } - 这个声明只是告诉浏览器“按页脚组方式渲染”，不改变 DOM 位置，也不修复结构错误
最常被忽略的一点：很多人花时间调 tfoot 的 CSS，却没意识到——只要里面没包 tr，或者顺序写错，所有样式和打印逻辑都会降级失效。语义错了，再好看的样式也是空中楼阁。
