根本原因是浏览器不支持对 thead 直接应用 position: sticky，因其父容器 table 的 display: table 限制了 sticky 行为；必须将 tbody 移入独立滚动容器并设 display: block 拆分结构，配合 colgroup 统一列宽才能实现稳定固定表头。
固定表头时 thead 为什么设了 position: sticky 还不生效
根本原因是 thead 的父容器（通常是 table）默认是 display: table，而 position: sticky 在 table 元素及其子元素（thead、tbody、tr）上行为受限——浏览器不支持对 thead 直接应用 sticky 定位。
常见错误现象：thead 完全不动、滚动时消失、或整个表格错位。这不是 CSS 写错了，而是语义容器不兼容。
- 必须把
tbody包在独立的滚动容器里（比如div），并设overflow-y: auto -
thead要脱离表格流，通常用display: block强制重置，同时tr和th也要对应设为display: table-row/table-cell - Bootstrap 5+ 的
.table类默认不干预display，但如果你用了.table-responsive，它只包裹外层div，不解决内部定位问题
用 display: block 拆分表头和表格体的实际写法
这是目前最稳定、兼容性最好的方案，绕过 thead 的 sticky 限制，靠结构分离实现视觉固定。
使用场景：需要在 Bootstrap 表格中支持纵向滚动且表头始终可见，尤其在管理后台数据列表中。
- 给
table加类table-fixed-header，并在 HTML 中手动把thead和tbody拆成两个独立table元素（共享列宽） - 用
colgroup或 JS 同步列宽，否则表头和内容列容易错位；简单项目可用table-layout: fixed+ 显式width控制 - 包裹
tbody的容器高度要设死（如max-height: 400px），并启用overflow-y: auto
| 姓名 | 邮箱 | 操作 |
|---|
| 张三 | zhang@example.com |
为什么不用 position: sticky + top: 0 直接套在 thead 上
因为多数现代浏览器（Chrome/Firefox/Safari）明确不支持在 thead 元素上触发 sticky 行为——它会被忽略，降级为 position: static。这不是 Bug，是规范限制。
参数差异：sticky 对 table-header-group（即 thead 的 display 值）的支持度为 0；但对普通 div 或 tr（设为 display: table-row）可生效，前提是其父容器有滚动上下文且非 table。
- 如果强行在
thead上写position: sticky; top: 0，DevTools 里能看到样式被解析，但计算后position仍显示为static - 某些旧版 Bootstrap（v4.3 之前）的 CSS 会重置
thead的display，进一步干扰定位逻辑 - 移动端 Safari 对
sticky在表格中的支持更差，甚至导致渲染卡顿
Bootstrap 5 自带的 .table-responsive 能不能救场
不能。它只是给 table 外层加了个 div 并设 overflow-x: auto，解决的是横向滚动，对纵向固定表头毫无帮助。
性能影响：用 display: block 拆分结构后，CSS 渲染路径变长，但实测在千行数据内无明显卡顿；比 JS 模拟 sticky（监听 scroll）更轻量、更可靠。
- 别试图给
.table-responsive加max-height和overflow-y——它没设display: block，子元素table仍会撑开容器 - 如果用到 Bootstrap 的状态类（如
.table-striped），需分别加在两个table上，否则条纹会断开 - 表头排序、筛选等交互逻辑，要确保事件委托目标仍是原始
th，而不是被拆分后的副本
固定表头真正麻烦的不是怎么写 CSS，而是列宽对齐和响应式断点下的宽度重算——这两处一旦出错，用户第一眼看到的就是错位，而不是滚动效果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
