直接给加sticky无效，因其display为table-header-group，不满足CSS规范对sticky元素的定位要求；必须对每个设置position: sticky; top: 0，并配齐外层滚动容器、背景色、z-index及table-layout: fixed等条件。

直接给 加 sticky-top 为什么没用？

因为 是表格格式化上下文里的 display: table-header-group 元素，浏览器会忽略对其设置的 position: sticky。你加了 sticky-top 类，DevTools 里能看到样式，但 computed 值里 position 仍是 static。这不是 Bootstrap 的 bug，是 CSS 规范限制。

固定表头必须对 单独设 position: sticky

真正起效的是把 sticky 行为落到单元格层级，并配齐必要条件：

• 必须显式写 position: sticky; top: 0; z-index: 1070;（不能用 z-index: auto）
• 外层容器（如
  ）必须有 max-height 和 overflow-y: auto，不能靠内容撑高
• 必须设 background-color（比如 #fff），否则滚动时文字会透出
• 祖先元素不能有 transform、filter 或 will-change，否则会切断 sticky 滚动链
• 或 上不能设 overflow: hidden，它会裁剪 sticky 渲染区域

  固定左侧列要用 bootstrap-table-fixed-columns 插件

  纯 CSS 很难同时兼顾表头固定 + 左侧列冻结 + 对齐，尤其在 Bootstrap 4 的 table 结构下。推荐用社区成熟方案：

  

  CSS工具箱(专业版)

  全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

  下载
  • 引入 bootstrap-table.min.js + bootstrap-table-fixed-columns.js 和对应 CSS
  • 初始化时启用：fixedColumns: true, fixedNumber: 2（固定前两列）
  • 插件会自动创建两个绝对定位容器：.fixed-table-header-columns 和 .fixed-table-body-columns，分别承载固定列的表头和数据
  • 注意：jQuery 版本不能低于 3.0；若用在 modal 或 offcanvas 内，需检查父容器是否用了 transform，有则需抽离表格结构

  z-index 被压住、表头消失或半截显示怎么办？

  Bootstrap 默认给 .dropdown-menu（1050）、.modal（1055）、.tooltip（1070）设了高 z-index。 的 z-index: 2 就会被盖住。解决方法很直白：

  • 把 的 z-index 提到至少 1070（比如 z-index: 1071）
  • 确认 的父级（、）没有 overflow: hidden
  • 如果表格嵌在 modal 中，且 modal 用了 transform: translate()，sticky 会失效——这时只能放弃原生 sticky，改用插件或重构布局

  最易被忽略的一点：sticky 表头依赖滚动容器的“上下文完整性”，哪怕一个 will-change: transform 在 body 上，都可能让整行 失效。调试时优先检查 DevTools 的 computed position 和 z-index，而不是只看 styles 面板。