用 position: sticky 实现固定表头最轻量，需对 设置 top: 0 和 position: sticky，父容器加 max-height 与 overflow-y: auto；ie/旧 edge 不支持，无完美降级方案；常见失效因缺少滚动上下文或层叠上下文干扰。
用 position: sticky 实现固定表头最轻量
bootstrap 本身不提供原生的“固定表头”组件，但现代浏览器（chrome 56+、firefox 59+、safari 15.4+）支持 position: sticky，配合 bootstrap 表格结构就能直接生效，不用 js、不改 dom 结构。
关键点在于：必须给 <thead> 内的 <code><tr> 或每个 <code><th> 设置 <code>top: 0 和 position: sticky，且父容器需有明确高度或可滚动上下文。
- 只对
<th> 加样式更稳妥（避免 <code><tr> 在某些版本 Bootstrap 中被 flex 包裹导致 sticky 失效）<li>必须确保 <code><table> 的父容器设置了 <code>max-height和overflow-y: auto，否则滚动区域不存在，sticky 不触发 - 如果表格用了
table-responsive，注意它会给父容器加overflow-x: auto，但不处理垂直滚动——得额外加max-height
<div class="table-responsive" style="max-height: 400px; overflow-y: auto;">
<table class="table table-striped">
<thead><tr>
<th style="position: sticky; top: 0; background: #fff; z-index: 10;">姓名</th>
<th style="position: sticky; top: 0; background: #fff; z-index: 10;">邮箱</th>
</tr></thead>
<tbody>
<tr>
<td>张三</td>
<td>zhang@example.com</td>
</tr>
<!-- 更多行... -->
</tbody>
</table>
</div>
IE 或老版本 Edge 下完全失效怎么办
position: sticky 在 IE 所有版本和旧版 Edge（≤18）中不支持，此时没有降级方案能 100% 复刻原生行为。强行用 JS 模拟会引入滚动抖动、表头错位、响应式断裂等问题。
- 如果项目必须兼容 IE，建议放弃“固定表头”，改用分页（
pagination）或虚拟滚动（如react-virtualized类库），而不是硬套 sticky - 若只是需要“视觉上像固定”，可用
position: absolute+ JS 监听 scroll，但会破坏表格语义、影响屏幕阅读器、且在移动端滚动性能差 - Bootstrap 5 已彻底放弃 IE 支持，所以只要确认目标环境不含 IE，就别浪费时间写兼容代码
为什么加了 top: 0 还不 sticky
常见原因不是写法错，而是布局约束没满足。sticky 的生效依赖“最近的有滚动机制的祖先容器”，而 Bootstrap 的 .table-responsive 默认只设了 overflow-x: auto，没设 height 或 max-height，导致内部没有垂直滚动上下文。
- 检查父容器是否设置了
max-height（不能只靠内容撑高） - 确认没有父级元素设置了
transform、filter或will-change—— 这些会创建新的层叠上下文，阻断 sticky 向上查找滚动容器 - 如果用了
table-bordered，边框可能让<th> 背景无法完全覆盖，记得加 <code>background: #fff和足够z-index - 用浏览器开发者工具检查 computed styles，看
position是否真的解析为sticky，而不是被重置为static - 与 Bootstrap 的响应式类（如
table-sm、table-hover）可能冲突，样式需额外复制 - 在 modal 或 tab-pane 里初始化时，容易因隐藏状态导致尺寸计算错误，得等显示后再调用
- 移动端 touch 事件处理不完善，快速滚动时表头常滞后或跳动
用 JS 插件（如 floatThead）的代价
这类插件本质是克隆 <thead> 到页面顶部，监听 scroll 动态同步位置。看似省事，但实际埋了不少坑：<ul>
<li>每次表格结构变化（增删列、动态渲染）都要手动调用 <code>reinitialize()，否则表头和内容列宽不同步
除非你已经在用且稳定运行多年，否则新项目别碰。现代浏览器下，纯 CSS 方案更可靠、更轻、更易维护。
真正麻烦的不是怎么写那几行 position: sticky，而是想清楚：这个表格到底需不需要固定表头？数据量大到必须滚动百行才看全？还是用户其实更想要搜索或筛选？很多时候，固定表头只是掩盖了信息架构的问题。
