tfoot必须作为table的直接子元素置于tbody之后，列数须与thead严格对齐，否则导致渲染异常、无障碍失效及跨浏览器兼容问题。
tfoot 必须紧跟在 thead 后面，不能放在 tbody 下面
浏览器解析表格时严格按 thead → tbody → tfoot 顺序处理，但渲染时会把 tfoot 放到底部。如果把 tfoot 写在 tbody 里面或后面，部分浏览器（尤其是旧版 Safari 和 IE）可能忽略它，或者导致布局错乱。
正确结构只能是：
| 商品 | 数量 |
|---|---|
| 苹果 | 5 |
| 合计 | 5 |
-
tfoot必须是table的直接子元素，且位置必须在tbody之后、/table之前 - 即使你只有一组数据，也建议显式写出
tbody，避免浏览器自动补全造成意外嵌套 - 不要指望用 CSS 的
order或flex去“重排”tfoot位置——它本就不该靠样式定位
tfoot 里的单元格要和 thead/tbody 列数严格对齐
如果 thead 有 3 列，但 tfoot 只写了 2 个 td，表格可能渲染异常：最后一列内容错位、边框断裂、甚至整行被吞掉。这不是样式问题，而是 HTML 结构校验失败。
常见错误写法：
<thead><tr> <th>名称</th> <th>单价</th> <th>数量</th> <th>小计</th> </tr></thead><tfoot><tr> <td colspan="3">总计</td> <td>120.50</td> </tr></tfoot>
- 用
colspan合并单元格是合法的，但总列宽必须等于表头列数（这里是 4） - 上面例子中
colspan="3"+ 1 个td= 4，没问题；但如果写成colspan="2"+ 1 就只剩 3 列，会出问题 - 动态生成表格时，务必校验
tfoot tr中所有td/th的colspan总和是否等于列数
tfoot 不支持 display: table-row-group 的 hack 替代方案
有人试图用 <div class="tfoot"> 加 CSS 模拟底部汇总，然后设 <code>display: table-row-group。这在 Chrome 可能看似有效，但在 Firefox 和 Safari 中行为不一致，且无法继承表格的边框合并（border-collapse）逻辑。
- 原生
tfoot能正确参与border-collapse: collapse，自定义 div 无法做到 - 屏幕阅读器会把
tfoot识别为“表格摘要区域”，对无障碍至关重要；div 没有这个语义 - 打印表格时，浏览器默认会在每页底部重复
thead，但不会重复tfoot—— 这是设计使然，别强行绕过
JavaScript 动态更新 tfoot 需要重新插入 DOM 节点
直接修改 tfoot 里 td 的 textContent 没问题，但如果你删掉整个 tfoot 再重建，要注意：不能只用 innerHTML 赋值，否则某些浏览器（如 Edge Legacy）会丢失 tfoot 的语义角色。
- 推荐做法是先
remove()原tfoot，再用document.createElement('tfoot')创建新节点，最后append()回table - 如果只是更新数字，直接操作
tfoot.querySelector('td:last-child').textContent = '186.20'更安全高效 - 注意：Vue/React 等框架中，
key或虚拟 DOM diff 可能跳过tfoot更新，需确保其存在且被正确追踪
