tfoot必须紧跟tbody之后且列数严格对齐，否则渲染错位、导出遗漏、打印重复；应按thead→tbody→tfoot顺序组织，计算有效列数，操作textContent保留属性，导出打印时单独处理。
tfoot 必须紧跟 tbody 之后，不能放在 table 底部任意位置
浏览器只会在 <tbody> 结束后、且没有其他 <tbody> 或 <thead> 干扰时，才把 <tfoot> 渲染为“表格底部汇总行”。如果写成 <table><thead>...</thead><tbody>...</tbody><tfoot>...</tfoot></table> 是对的；但若中间插了第二个 <tbody>，或把 <tfoot> 放在 <thead> 前面，多数浏览器会把它当成普通行渲染，甚至移到 <tbody> 里——这时你写的合计逻辑可能还在，但视觉上完全错位。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 始终按
<thead>→<tbody>→<tfoot>顺序组织结构 - 避免在一个
<table>中混用多个<tbody>（除非真需要语义分组） - 用浏览器开发者工具检查 DOM 树，确认
<tfoot>确实是<table>的直接子节点，且位置紧接在最后一个<tbody>后
tfoot 里的单元格要和 tbody 列数严格对齐，否则 colspan 容易失控
很多人在 <tfoot> 里写 <td colspan="5">合计：1234</td>，结果发现数值右偏、边框断裂、或者响应式下错行——根本原因是列数不一致。比如 <tbody> 每行有 6 个 <td>，但 <thead> 因合并标题用了 colspan="2"，导致实际列定义只有 5 列；此时 <tfoot> 若按“肉眼数出的 td 个数”设 colspan="5"，就会漏掉一列隐式定义。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 先确定整张表的**有效列数**：看
<colgroup>或统计<thead><tr>中所有<th>的colspan总和（如两个<th colspan="2">+ 一个<th>= 5 列） -
<tfoot><tr>内的<td>数量必须等于该列数；若只需一个汇总单元格，用colspan覆盖全部，值必须等于计算出的列数 - 避免在
<tfoot>里嵌套<table>或用 CSSdisplay: grid打乱原生表格流
用 JavaScript 动态计算汇总值时，别直接 innerHTML 覆盖 tfoot
常见错误：获取 <tfoot><td> 后直接 el.innerHTML = total，结果原有 class、data 属性、事件绑定全丢了；更隐蔽的是，如果 <tfoot> 里原本有 <span class="currency"> 包裹金额，覆盖后样式失效，还可能破坏无障碍属性（如 aria-label）。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 优先操作文本节点：
td.textContent = total.toFixed(2)，保留结构和属性 - 若需格式化（如加千分位、货币符号），用
Intl.NumberFormat处理数值，再赋给textContent - 如果
<tfoot>里有多个汇总项（如“总金额”“平均值”“笔数”），给每个<td>加唯一data-role，例如<td data-role="sum-amount">，JS 通过querySelector精准更新，不碰其他单元格
打印 PDF 或导出 Excel 时，tfoot 可能被忽略或重复
很多前端导出库（如 SheetJS、jspdf-autotable）默认只读取 <tbody>，<tfoot> 不进数据源；而浏览器原生打印预览中，<tfoot> 有时会在每页底部重复出现（尤其当表格跨页时），造成汇总信息污染每页。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 导出前手动提取
<tfoot>数据，拼接到最终数据数组末尾（SheetJS 中可 push 一行对象） - 打印样式里加
@media print { tfoot { display: none; } }，改用 JS 在打印前把汇总值插入<tbody>最后一行，打印完再还原 - 服务端生成 PDF 时，不要依赖 HTML 的
<tfoot>，而应在数据层单独计算汇总字段传给模板
真正麻烦的不是写 <tfoot>，而是它既参与渲染又影响导出、打印、可访问性，稍不注意就变成“看起来对，用起来错”的隐形坑。
