tfoot比手动加tr更可靠地隔离汇总行，因其脱离tbody计数上下文、语义化且利于无障碍访问，但需显式重置继承样式、处理兼容性并优化打印样式。
为什么 tfoot 比手动加 tr 更可靠地隔离汇总行
直接在 tbody 末尾加一条 tr 做汇总，样式容易被 tr:nth-child(even) 或 tr:hover 规则误匹配——它仍是 tbody 的子元素，索引连续计算。用 tfoot 则天然脱离 tbody 的计数上下文，CSS 选择器可精准作用于汇总区域。
常见错误现象：tr:nth-child(odd) 导致汇总行背景色和奇数数据行一样；鼠标悬停时汇总行也高亮，违背“只读汇总”意图。
-
tfoot是语义化标签，浏览器和屏幕阅读器会将其识别为汇总区域，利于无障碍访问 - 部分旧版 IE（如 IE8）不支持
tfoot样式独立渲染，需额外加 class 降级兜底 - 若后端动态生成表格且无法控制结构，
tfoot可能被忽略或遗漏，此时需 JS 补充判断
tfoot 的 CSS 样式必须显式重置继承行为
默认情况下，tfoot 会继承 tbody tr 的字体、背景、对齐等样式，尤其容易漏掉 background-color 和 font-weight 的覆盖。
典型疏忽：只写了 tfoot { background: #eee; }，但没清除 tbody tr:hover 对它的影响，结果悬停时仍变色。
- 务必重置 hover 效果：
tfoot:hover { background-color: inherit !important; } - 避免字体继承失真：
tfoot td { font-weight: bold; font-size: 1.05em; } - 如果用了
border-collapse: collapse，tfoot的边框可能与tbody最后一行粘连，加border-top: 2px solid #333;显式分隔
当必须用 tr 模拟汇总行时，如何避免 nth-child 错乱
有些框架（如旧版 AngularJS 表格指令）或 CMS 输出固定结构，无法插入 tfoot，只能靠 class 区分。
关键不是“给最后一行加 class”，而是让 CSS 规则完全避开它——否则 tr:nth-child(odd) 仍会命中。
- 把隔行变色规则限定在
tbody tr：tbody tr:nth-child(even) { background: #f9f9f9; }，而非宽泛的tr:nth-child(even) - 汇总行统一加 class：
<tr class="summary-row"> <td>总计</td> <td>¥12,345</td> </tr> - 在 CSS 中彻底屏蔽其交互：
.summary-row { pointer-events: none; }，防止意外触发 hover 或 click 事件
汇总行文字右对齐但数字列需保留小数点对齐
纯 text-align: right 会让金额列的 “¥1,234.56” 和 “¥78.9” 小数点错位，视觉混乱。
这不是 CSS 的 bug，而是对齐逻辑本身的问题：右对齐按字符末端对齐，不是按数值小数点对齐。
- 推荐方案：用
text-align: right+direction: rtl组合，强制数字按小数点对齐（需配合unicode-bidi: plaintext防止文本方向干扰） - 更稳妥做法：给金额列单独加 class，用
text-align: char; char: '.';（仅 Chrome/Edge 支持，Firefox 不支持） - 兼容性最强：用空格补位或 monospace 字体 +
white-space: pre，但需后端或 JS 控制格式化输出
@media print）中的表现——很多页面 CSS 没定义 tfoot 打印时的背景色或边框，导致导出 PDF 时汇总信息不可见。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
