TFOOT 不固定是因为它仅是语义标签，无视觉固定能力；需拆解为 block 容器并用 flex/grid 布局实现底部固定，同时兼顾可访问性补救措施。
为什么 TFOOT 在滚动表格里不“固定”
直接说结论：TFOOT 本身不提供视觉固定能力，它只是语义化标签，浏览器默认不会让它悬浮或粘在底部。很多人加了 TFOOT 后发现滚动时页脚跟着动，甚至被遮挡，是因为混淆了「结构语义」和「视觉表现」。
HTML 的 TFOOT 只影响表格的 DOM 结构顺序和可访问性（比如屏幕阅读器会优先读 THEAD 和 TFOOT），但不触发任何 CSS 定位行为。想“固定底部”，必须靠 CSS 配合，且要避开原生表格渲染限制。
用 display: block 拆解表格才能真正控制 TFOOT 位置
原生 table 元素内部的 TFOOT 无法脱离表格流做 position: sticky 或 absolute 定位——浏览器强制按表格布局算法渲染，top/bottom 会被忽略。
可行做法是把表格逻辑拆成三块独立容器，各自设为 display: block，再用 flex 或 grid 控制整体布局：
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
<div class="table-wrapper"> <div class="thead">...</div> <div class="tbody">...</div> <div class="tfoot">...</div> </div>
-
tbody设max-height+overflow-y: auto实现滚动 -
tfoot放在容器最底部，用flex-direction: column确保它始终贴底 - 每列宽度需用
min-width或width显式对齐，否则容易错位
position: sticky 对 TFOOT 失效的常见原因
即使你没拆表、硬套 position: sticky 到 TFOOT，大概率无效。这不是 bug，而是规范行为：
-
sticky在table内部子元素上被禁用（除table-row外，TFOOT是table-footer-group，不支持） - 父容器没设
height或max-height，导致没有“滚动上下文” - 写了
bottom: 0但没配overflow-anchor: none，某些 Chrome 版本会跳过 sticky 计算
验证方法：打开 DevTools，选中 TFOOT 元素，看 Computed 面板里 position 是否真的生效——多数时候它悄悄回退成了 static。
兼容性与可访问性取舍要点
拆表方案能实现视觉固定，但代价是丢失原生表格语义。如果页面需要无障碍支持（如读屏软件识别汇总行），就得补救：
- 给自定义
tfoot容器加role="rowgroup"和aria-label="Summary footer" - 用
scope="col"手动标注每列对应关系，否则屏幕阅读器可能无法关联数据单元格 - IE11 不支持
display: contents，别试图用它“透明化”包裹层——直接放弃 IE 或降级为静态底部
真正麻烦的不是写法，是列宽同步和响应式断点下 tfoot 内容换行错位。建议用 table-layout: fixed + width 百分比控制，而不是依赖内容撑开。
