对<thead>设sticky-top无效，因表格上下文中浏览器忽略position: sticky；必须为每个<th>单独设置position: sticky; top: 0，并配background-color、z-index≥1070、border-bottom，外层容器需max-height和overflow-y: auto，且启用table-layout: fixed确保列宽同步。
直接给 <thead> 加 sticky-top 或 position: sticky 无效——浏览器不支持在表格格式化上下文中触发粘性定位；真正起效的是对每个 <th> 单独设置 position: sticky，并配好滚动容器和层叠控制。
为什么 <thead> 上加 sticky-top 没用
Bootstrap 的 sticky-top 类只是封装了 position: sticky; top: 0，但它只对常规块级元素（如 <div>、<nav>）生效。<thead> 默认是 display: table-header-group，属于表格格式化上下文，浏览器会忽略对其设置的 position: sticky，即使 DevTools 显示样式，computed 值里 position 仍是 static。
常见错误现象包括：<thead> 完全不动、滚动时突然消失、或只在部分列上“半固定”。
-
<thead>不是 sticky 的作用目标，<th>才是 - Bootstrap 表格结构没变，但语义容器不响应 sticky
- 别依赖
<tr>或<thead>的 class 封装，必须落到单元格层级
每个 <th> 必须显式设 position: sticky 和关键视觉属性
只有 <th> 元素自己声明 position: sticky; top: 0，才能在滚动时被锚定到顶部。但光这样还不够，还必须满足三个视觉隔离条件，否则表头会透出内容、被遮盖或错位。
立即学习“前端免费学习笔记（深入）”；
-
background-color必须显式声明（如#fff），不能是transparent或未设置 -
z-index至少为1070（避开 Bootstrapdropdown-menu的1050和modal的1060） - 加
border-bottom: 1px solid #ddd，避免与第一行数据之间出现视觉断裂
外层容器必须提供滚动上下文，且不能有阻断属性
position: sticky 不是“自动粘”，它依赖父级滚动容器作为锚点。没有滚动上下文，top: 0 就毫无意义。
- 包裹
<table>的<div>必须设max-height（如400px）和overflow-y: auto（不能是visible或hidden） -
table-responsive只处理水平滚动（overflow-x: auto），垂直滚动需手动补max-height和overflow-y: auto - 祖先链任意一层用了
transform、filter或will-change，都会创建新层叠上下文，切断 sticky 链 -
<tr>或<thead>上设了overflow: hidden，会裁剪<th>的 sticky 渲染区域
列宽不同步会导致表头和内容错位
即使 sticky 全部生效，<th> 和 <td> 列宽不一致也会让表头“漂移”，这不是 sticky 问题，而是表格渲染机制导致的。
- 必须启用
table-layout: fixed（Tailwind 中对应table-fixed） - 给每个
<th>和对应<td>设相同宽度（如w-32、min-w-[120px]） - 长文本加
whitespace-nowrap或truncate，避免换行撑开列宽 - 别依赖
<colgroup>控制宽度——它在 Tailwind 中无法响应式生效
最容易被忽略的是：移动端 Safari 15.4 以下对 position: sticky 更苛刻，缺少 min-height、z-index 不显式声明、或地址栏缩放抖动，都会让表头回退成 static。如果项目仍需兼容旧版 Safari 或 IE，不要强塞 polyfill——结构级降级（拆成两个独立 <table> + JS 同步列宽）比 JS 模拟 sticky 更可靠。
