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