tfoot中统计行必须用tr+td/th结构，确保语义正确、列数对齐、可访问性达标，并通过css单独控制样式，动态更新时仅修改单元格内容。
tfoot 里放统计行必须用 tr + td/th，不能只写数字
浏览器不会自动把纯文本当表格单元格渲染。tfoot 是语义容器，内容仍需符合表格结构。常见错误是直接在 tfoot 里写“合计：1200”，结果不换行、无对齐、样式失效。
正确做法是套一层 tr，每列数据用 td（或汇总项用 th 标明角色），和 thead/tbody 对齐列数：
<tfoot><tr>
<th scope="row">合计</th>
<td>24</td>
<td>¥1,200.00</td>
<td>87%</td>
</tr></tfoot>
-
th加scope="row"告诉屏幕阅读器这是行标题，比纯td更可访问 - 列数必须和
tbody中的tr一致，否则会错位或被浏览器强行补空格 - 避免用
colspan合并所有列——虽能实现单格居中，但破坏语义且影响响应式重排
tfoot 统计行的 CSS 对齐和样式要单独控制
默认情况下，tfoot 的 td 继承 tbody 样式，但字体加粗、背景色、边框等往往需要差异化处理。尤其注意：tfoot 不会自动继承 tbody tr:nth-child(even) 这类选择器的样式。
推荐用属性选择器精准定位：
tfoot td {
font-weight: bold;
background-color: #f8f9fa;
border-top: 2px solid #dee2e6;
}
tfoot th {
text-align: left;
}
- 不要依赖
tbody + tfoot相邻选择器来设边框，部分浏览器渲染顺序不稳定 - 如果表格有固定表头（
position: sticky），tfoot需额外设z-index才能压住滚动内容 - 移动端小屏下，考虑用
@media把统计行改为块状堆叠，而非强制保持表格布局
JavaScript 动态更新 tfoot 数据时，别替换整个 tfoot 元素
直接 innerHTML = "..." 或 replaceChild 整个 tfoot，会导致事件监听丢失、焦点中断、以及 SSR/SEO 内容不一致。更稳妥的是只更新单元格内容。
假设统计行是 tfoot tr，可用：
const footerRow = document.querySelector('tfoot tr');
footerRow.cells[1].textContent = totalItems;
footerRow.cells[2].textContent = formatCurrency(totalAmount);
- 用
cells集合比querySelectorAll('td')更可靠——它始终反映当前实际列数，不受嵌套div干扰 - 避免用
innerHTML插入带 HTML 的统计值（如带单位符号），易引发 XSS；纯文本用textContent，必要时用insertAdjacentText - 如果统计逻辑复杂（如跨多页聚合），确保脚本在
DOMContentLoaded后执行，且避开tfoot尚未解析完成的时机
tfoot 在打印样式和无障碍支持上容易被忽略
多数人只测试屏幕显示，但 tfoot 在打印预览里常被截断或遗漏，同时读屏软件可能跳过它——除非标记足够清晰。
- 打印 CSS 中显式声明
@media print { tfoot { display: table-row-group; } }，防止被某些浏览器默认设为display: none -
th必须带scope属性（row或col），否则 NVDA/JAWS 可能无法关联该单元格与对应数据列 - 不要用视觉隐藏类（如
sr-only）包裹统计说明文字，应保留在 DOM 中并用aria-label补充上下文，例如：<th scope="row" aria-label="总计行">合计</th>
tfoot 的核心不是“放在底部”，而是“明确标识这是汇总层”。列对齐、语义标记、动态更新方式、输出场景适配——这四点漏掉任一环，统计行就只是看起来像汇总，实际并不健壮。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
