position: sticky 是现代浏览器下最轻量可靠的固定表头方案，但直接作用于 thead 无效，因其父容器 table 的 display: table 限制了 sticky 行为；必须将 tbody 单独包裹在有垂直滚动上下文的容器中，并设 thead 为 display: block，同时统一列宽并处理层叠上下文干扰。
现代浏览器（Chrome 56+、Firefox 59+、Safari 15.4+）下，position: sticky 是最轻量、最可靠的方案；IE 或旧 Edge（≤18）完全不支持，没有真正可用的降级方案。
为什么 thead 加了 position: sticky 还不生效
根本不是 CSS 写错了，而是 thead 的父容器 <table> 是 display: table，浏览器明确不支持对 thead、tbody 等表格内部元素直接应用 sticky。即使你给 <thead> 或 <tr> 加了 top: 0 和 position: sticky，它也不会动。
- 必须把
<tbody>单独包进一个有垂直滚动上下文的容器里（比如<div style="max-height: 400px; overflow-y: auto;">） -
<thead>要脱离原表格流，通常需设display: block，同时其子元素<tr>和<th>也要对应设为display: table-row/display: table-cell - 列宽必须靠
<colgroup>或显式width统一，否则表头和内容列会错位
用 bootstrap-table 插件时如何启用固定表头
插件本身支持，但必须显式设置高度，仅靠 CSS 无效。
- HTML 中
<table id="table">不需要额外 class 或 wrapper - JS 初始化时必须传
height参数，例如：$('#table').bootstrapTable({ height: 400 }) - 如果用了
data-height="400"属性，确保该属性写在<table>标签上，且值是数字（不要带px） - 避免同时启用
scrollToTop或自定义onScroll，可能干扰表头定位逻辑
手动实现时 <th> 样式容易漏的关键点
只加 position: sticky 和 top: 0 不够，视觉错位或闪烁很常见。
- 每个
<th>必须设background-color（如#fff），否则滚动时底色透出 - 必须设
z-index: 10或更高，否则会被后续行遮挡 - 避免父容器有
transform、will-change或filter——这些会创建新的层叠上下文，导致sticky失效 - 如果用了
table-responsive，它只提供overflow-x: auto，必须额外加max-height和overflow-y: auto才能触发垂直滚动
真正麻烦的不是怎么写，而是不同场景下约束条件完全不同：原生表格要拆结构，bootstrap-table 要设 height，而所有方案都绕不开列宽同步和层叠上下文干扰——这些细节一旦漏掉，表头就“看起来像固定了”，实际一滚动就露馅。
