直接给 .table 加 position: sticky 不生效，是因为 .table 是 display: table 元素，其子元素（如 thead、th）不构成独立定位上下文；sticky 需作用于 th 并配合可滚动容器（如 max-height + overflow-y: auto）、top: 0、background-color 和 z-index 才能正确触发。
为什么直接给 .table 加 position: sticky 不生效
Bootstrap 默认的 .table 是普通块级元素，thead 里的 tr 和 th 没有独立定位上下文。直接对 th 设置 position: sticky; top: 0，但父容器（比如 thead）没设 display: block 或限制高度，浏览器无法触发粘性定位——它会“穿透”上去找最近的滚动容器，而通常这个容器是 body 或整个页面，不是表格内部。
必须包裹一层可滚动的容器并设 display: block
固定表头本质是让 tbody 可滚动、thead 在其上方保持静止。Bootstrap 表格默认是 display: table，不支持子元素单独滚动。所以得手动拆解布局：
- 把
<table>外层套一个<div class="table-container">，设max-height: 400px; overflow-y: auto; display: block; - 给
thead th加position: sticky; top: 0; background: white; z-index: 1;（background防止滚动时文字透底） - 确保
tbody不塌陷：加display: block; max-height: none;（否则部分浏览器会忽略高度限制）
示例关键 CSS：
.table-container {
max-height: 400px;
overflow-y: auto;
display: block;
}
.table-container .table {
width: 100%;
}
.table-container thead th {
position: sticky;
top: 0;
background: #fff;
z-index: 1;
border-bottom: 2px solid #dee2e6;
}
.table-container tbody {
display: block;
max-height: none;
}
.table-container thead,
.table-container tbody tr {
display: table;
width: 100%;
table-layout: fixed;
}
IE11 及旧版 Safari 不支持 sticky 怎么办
Bootstrap 4/5 官方不提供原生固定表头，因为 position: sticky 兼容性有限（IE 完全不支持，Safari ≤ 15.4 有渲染 bug）。如果必须兼容，得用 JS 方案：
立即学习“前端免费学习笔记（深入）”；
- 监听
scroll事件，动态计算thead的transform: translateY()值 - 或用现成库如
bootstrap-table的data-sticky-header="true"（注意它会重写 DOM 结构） - 纯 CSS 替代方案极难维持列宽对齐——一旦
thead和tbody分离为不同display: table容器，列宽容易错位，必须用table-layout: fixed+ 手动设每列width
列宽错位是最容易被忽略的坑
当 thead 和 tbody 被强制设为独立 display: table 时，浏览器不再自动同步列宽。哪怕 HTML 中 th 和 td 内容长度一致，视觉上也会错开。
- 必须给
table设table-layout: fixed - 给每一列的
th和第一行td显式设width（如width: 150px或width: 20%） - 避免在
th或td里用white-space: nowrap+ 长文本，这会让固定宽度失效
错位问题往往上线后才暴露，尤其在响应式断点切换时——列宽定义没覆盖所有屏幕尺寸。
