thead设position: sticky不吸顶是因为其display: table-header-group不在规范支持范围内，真正生效的是每个th必须设position: sticky; top: 0; z-index: 1070; background-color: white，且父容器需有max-height和overflow-y: auto，祖先不能含transform/filter等截断滚动链的属性。

position: sticky 是最直接有效的方案，但必须满足几个硬性条件，否则表头根本不会“粘”住——不是代码写错了，而是环境没配对。

CSS工具箱(专业版)

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

下载

为什么 thead 设了 position: sticky 却完全不吸顶？

常见错误是只给 或 加样式，而真正起效的必须是每个 单元格：

• 必须显式声明 position: sticky; top: 0;， 层级设 sticky 无效
• 父容器（比如
  ）必须有 max-height 和 overflow-y: auto，否则没有滚动上下文，sticky 不触发
• 祖先元素不能有 transform、filter 或 will-change，这些会创建新层叠上下文，切断 sticky 的滚动链
• 或 上写了 overflow: hidden，会裁剪 sticky 元素的渲染区域

  Bootstrap 表格里表头“半固定”或被下拉菜单盖住怎么办？

  Bootstrap 的 .dropdown-menu 默认 z-index: 1050，.modal 是 1060，如果 的 z-index 是 auto 或 100，就会被遮挡：

  • 必须设 z-index: 1070（不能是 auto，也不能太小）
  • 必须设 background-color: white（或其它不透明色），否则滚动时 tbody 内容会透上来
  • 避免把表格嵌在 .modal 或 .offcanvas 里——它们内部默认用了 transform，得把表格抽出来单独包一层滚动容器

  表头和内容列宽错位、滚动条挤窄了 tbody 怎么办？

  当父容器出现垂直滚动条时， 宽度会被自动压缩（滚动条占约 17px），但 没被压缩，导致列不对齐：

  • 给 加 padding-right: 17px（或用 calc(100% + 17px) 调整宽度）
  • 设置 table-layout: fixed 在 上，强制按 th 宽度分配列
    确保所有

    和对应	有明确的 width 或使用 min-width 统一基准 最容易被忽略的是：sticky 表头依赖滚动容器的“边界完整性”。哪怕只是外层 多了个 transform: translateY(0)，或者 modal 弹窗用了 transition，都可能让整个 sticky 链失效——这不是浏览器 bug，是规范行为。调试时优先检查祖先元素的 CSS 属性，而不是反复改	样式。