tfoot不能放脚注，仅用于表格汇总行；脚注应置于table外的div或footer中，否则会导致HTML验证失败、打印错位及无障碍问题。
用 <tfoot> 放脚注，但别指望它自动“汇总”
<tfoot> 的语义确实是表格脚部，常被用来放统计行、单位说明或数据来源——但它本身不做任何计算或逻辑处理。很多人误以为加了 <tfoot> 就能自动求和或生成说明，结果发现页面没变化，或者内容错位。根本原因：浏览器只按 HTML 结构渲染，不解析语义做运算。
实际使用时，<tfoot> 必须放在 <tbody> 之后、</table> 之前（HTML 规范要求），否则解析可能出错或被移位。常见错误是把它插在 <thead> 下面，或和 <tbody> 并列却顺序颠倒。
-
<tfoot>必须包裹在<tr><td>或<tr><th>内，不能直接写文字 - 若表格有多个
<tbody>，<tfoot>只属于整个<table>，不是某个<tbody> - CSS 中
tfoot tr可单独样式化，但部分旧版 Safari 对<tfoot>固定定位支持不稳定
脚注内容该放什么？别塞进“汇总数据”除非真算好了
所谓“汇总数据说明”，得区分两类场景：静态说明（如“数据截至2024-06”）和动态汇总（如“合计：¥12,843”）。前者直接写进 <tfoot> 没问题；后者必须靠 JavaScript 计算后填入，或服务端渲染好再输出 HTML。
比如想在脚注显示金额总和，不能只写：<td>合计：</td><td>??</td>——那只是占位符。真实做法是：
立即学习“前端免费学习笔记（深入）”；
- 先确保每行金额单元格有明确 class 或 data 属性，例如
<td class="amount" data-value="299.00">¥299</td> - 用 JS 遍历所有
.amount，累加dataset.value，再写入tfoot td:last-child - 如果服务端已知汇总值，直接输出
<td>合计：¥12,843</td>，更可靠
强行用 CSS 伪元素（如 ::after）拼接“合计：”文字，会导致屏幕阅读器无法读出数值，可访问性受损。
样式错乱？检查 display 和 table-layout
加了 <tfoot> 后列宽错位、文字挤成一团，大概率是 CSS 干扰。默认情况下，<tfoot> 行仍参与表格列宽计算，但某些 CSS 重置库（如 normalize.css）或自定义 table { display: block } 会破坏原生表格渲染流。
- 禁用
table { display: inline-table }或display: grid—— 这会让<tfoot>失去语义上下文 - 避免对
tfoot td设置固定width，优先用table-layout: fixed+col标签控制列宽 - 如果需要脚注行背景色高亮，用
tfoot { background: #f8f9fa }，而不是给每个td单独设背景，防止边框塌陷异常
替代方案：什么时候不该用 <tfoot>？
脚注信息如果和表格逻辑弱相关（比如“本数据由XX部门提供，仅供参考”），或者要响应式折叠/展开，硬塞进 <tfoot> 反而增加维护成本。这时候更适合：
- 在
<table>后紧跟一个<div class="table-footer">，语义清晰且不受表格渲染约束 - 用 ARIA 标注：给表格加
aria-describedby="footnote-id"，再让<div id="footnote-id">放说明文字，兼顾可访问性 - 复杂脚注带链接、图标或交互按钮？
<tfoot>里写 HTML 没问题，但注意移动端小屏下font-size和 padding 要重设，否则点按区域太小
真正容易被忽略的是：当表格被 JS 库（如 DataTables 或 Ant Design Table）接管后，<tfoot> 往往被忽略或覆盖——得查对应库文档是否支持原生 <tfoot> 渲染，而不是假设它一定生效。
