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