tfoot不是排版工具，而是浏览器用于跨页打印、滚动固定和无障碍访问的语义钩子；必须位于thead之后tbody之前，且内部必须用tr包裹td/th，否则破坏结构、导致打印丢失、JS失效和屏幕阅读器跳过。
直接说结论：<tfoot>不是“加个底部文字”的排版工具，它是浏览器用来提前解析、跨页打印、滚动固定和无障碍访问的语义钩子；用错位置、塞错结构，合计行可能显示正常，但打印丢数据、滚动错位、屏幕阅读器跳过。<h3>tfoot必须写在thead之后、tbody之前</h3>
<p>HTML规范强制顺序是<code><thead> → <code><tfoot> → <code><tbody>，这不是“写哪都一样”的视觉问题，而是影响底层行为的关键约束：<ul><li>打印多页表格时，只有前置的<code><tfoot>才会在每页底部重复出现；后置则大概率只出现在最后一页<li>
<code>tbody { max-height: 300px; overflow-y: auto; }要生效，依赖<tbody>是独立语义块——而这个前提就是<code><tfoot>没混在它里面<li>异步加载长表格时，浏览器能先渲染<code><tfoot>里的“总计 ¥7,900”，提升首屏感知<li>某些选择器如<code>tr:nth-child(odd)会把<tfoot>的行算进总行数，顺序错乱会导致隔行变色错位<h3>tfoot里必须用tr包裹td/th，不能直接写文本或td</h3>
<p><code><tfoot>是行容器，不是单元格容器。常见错误是这样写：<pre class="brush:php;toolbar:false;"><tfoot>
<td>合计</td>
<td>¥7900</td>
</tfoot></pre><p>这会导致DOM解析异常——浏览器可能把<code><td>提升到<table>根级，破坏表格结构，table.tFoot属性返回null，JS操作失败。
立即学习“前端免费学习笔记（深入）”；
正确写法只有一种：
<tfoot>
<tr>
<th scope="row">合计</th>
<td>24</td>
<td>¥1,200.00</td>
<td>87%</td>
</tr>
</tfoot>-
<th scope="row">告诉屏幕阅读器这是行标题，比纯<td>更可访问 - 列数必须和
<thead>及所有<tbody> tr严格一致；可用colspan合并，但总数不能少也不能多 - 别用
colspan="100%"强行居中——破坏列对齐，响应式下易崩，且语义错位
tfoot样式必须用CSS控制，不能靠HTML属性
align、valign等HTML4属性在HTML5中已被移除，硬写进去浏览器会忽略：
<tfoot align="right"></tfoot> <!-- 无效 -->
所有样式都得走CSS，且要注意：
-
tfoot td不会自动继承tbody tr:nth-child(even)这类选择器的样式，需单独写 - 推荐用属性选择器精准定位：
tfoot td、tfoot th - 如果表格用了
position: sticky固定表头，<tfoot>需额外设<code>z-index才能压住滚动内容 - 移动端小屏下，建议用
@media把统计行改为块状堆叠，而非强行保持表格布局 - 如果表格有多个
<tbody>段落并需要分组小计，<tfoot>只能有一个——这时得用额外<code><tbody>模拟，或放弃<tfoot>改用<code><div class="table-footer"> - 想放带超链接、图标或多段落的“脚注”？那不属于
<tfoot>职责范围，应放在<code></table>外的<div class="table-footnote">里最容易被忽略的一点：你写的
<tfoot>哪怕只有一行，只要没用<code><tr>包裹，就不是合法结构；而一旦用了，就必须接受它的语义约束——它代表整张表的汇总信息，不是任意位置的排版占位符。
JavaScript动态更新tfoot时，只改单元格内容
别替换整个<tfoot>元素，否则会清空事件监听、中断焦点、破坏SSR/SEO一致性：<pre class="brush:php;toolbar:false;">// ❌ 错误：清空一切
tfoot.innerHTML = '<tr><td>合计</td><td>' + total + '</td></tr>';
<p>// ✅ 正确：只更新已有单元格
const footerRow = document.querySelector('tfoot tr');
footerRow.cells[0].textContent = '合计';
footerRow.cells[1].textContent = totalItems;
footerRow.cells[2].textContent = formatCurrency(totalAmount);</pre><ul><li>前提是<code><tfoot>已存在且结构合法（含<code><tr>）
