直接给加sticky-top无效，因其display为table-header-group，不支持position: sticky；须将sticky应用于，并配外层max-height+overflow-y:auto、背景色与z-index≥1070、禁用transform等干扰样式。
为什么直接给 加 sticky-top 不生效
因为 <thead> 是表格格式化上下文的一部分，浏览器会忽略对其直接设置的 <code>position: sticky（哪怕你用了 Bootstrap 的 sticky-top 类）。它被 display: table-header-group 约束，无法响应粘性定位。DevTools 里能看到样式，但 computed 值里 position 实际是 static。
真正起效的是把 position: sticky 落实到 <th> 元素本身：
<ul><li><code><th> 必须显式写 <code>position: sticky; top: 0;
外层容器（比如 <div class="table-container">）必须设 <code>max-height 和 overflow-y: auto，不能靠内容撑高
<th> 必须带 <code>background-color（如 white），否则滚动时文字会透出底层内容
祖先元素不能有 transform、filter 或 will-change，否则会切断 sticky 的滚动上下文链
表头固定后列宽错位怎么办
滚动条会挤压 <tbody> 宽度，但 <code><thead> 没有滚动条，导致列宽不一致、表头和内容错位。这不是 bug，是默认行为。
<p>解决方法分两步：</p>
<ul>
<li>用 <code>table-layout: fixed 强制表格按指定宽度分配列，避免内容撑开影响对齐
给 <thead> 添加 <code>padding-right: 17px（滚动条宽度）补偿，或更稳妥地：给整个 <table> 设 <code>width: 100%，再统一用 th, td { width: [具体值] } 或 min-width
所有 <th> 和 <code><td> 的 <code>padding、border、box-sizing 必须完全一致，否则像素级偏差也会放大错位
z-index 被遮挡、表头看不见怎么调
不是样式没加，而是层叠顺序被压住了。Bootstrap 的 dropdown-menu、modal 默认 z-index 是 1050–1060，而你只给 <th> 设了 <code>z-index: 2，自然被盖住。
调整要点很直接：
<th> 的 <code>z-index 至少设为 1070（比 modal 高一级）
- 确保
<th> 的父级（如 <code><tr>、<code><thead>）没有 <code>overflow: hidden——它会裁剪 sticky 元素的渲染区域
- 如果表格在
modal 或 offcanvas 里，检查这些组件是否用了 transform；有的话得把表格抽出来单独滚动，不能嵌套在里面
双固定（表头 + 首列）的关键条件
只给 <th> 加 <code>top: 0 不够，首列也要动起来。而且两者交汇处（左上角单元格）必须同时满足两个方向的粘性，否则会出现“缺角”或层级混乱。
必须同时满足以下四点：
- 父容器设
overflow: auto（不是 overflow-x: auto 单独设，要能触发两个方向的 sticky 上下文）
<th> 和 <code><td> 都要单独设 <code>position: sticky：表头用 top: 0，首列用 left: 0
- 左上角单元格（
thead th:first-child）必须同时写 top: 0; left: 0;
- 层级要分清：
z-index: 10（表头）、z-index: 20（首列）、z-index: 30（左上角），三者不能一样
真正在意兼容性（比如政务、银行系统还要跑 IE）的话，别硬扛 sticky ——它在 IE 完全不支持，Safari 15.2 之前也有严重偏移 bug。这时候用 transform: translateY() 移动整个 <thead>，配合 <code>IntersectionObserver 监听视口位置，比手动操作每个 style.top 更稳也更轻量。
<thead> 是表格格式化上下文的一部分，浏览器会忽略对其直接设置的 <code>position: sticky（哪怕你用了 Bootstrap 的 sticky-top 类）。它被 display: table-header-group 约束，无法响应粘性定位。DevTools 里能看到样式，但 computed 值里 position 实际是 static。
position: sticky 落实到 <th> 元素本身：
<ul><li><code><th> 必须显式写 <code>position: sticky; top: 0;
<div class="table-container">）必须设 <code>max-height 和 overflow-y: auto，不能靠内容撑高
<th> 必须带 <code>background-color（如 white），否则滚动时文字会透出底层内容
transform、filter 或 will-change，否则会切断 sticky 的滚动上下文链<tbody> 宽度，但 <code><thead> 没有滚动条，导致列宽不一致、表头和内容错位。这不是 bug，是默认行为。
<p>解决方法分两步：</p>
<ul>
<li>用 <code>table-layout: fixed 强制表格按指定宽度分配列，避免内容撑开影响对齐
<thead> 添加 <code>padding-right: 17px（滚动条宽度）补偿，或更稳妥地：给整个 <table> 设 <code>width: 100%，再统一用 th, td { width: [具体值] } 或 min-width
<th> 和 <code><td> 的 <code>padding、border、box-sizing 必须完全一致，否则像素级偏差也会放大错位
z-index 被遮挡、表头看不见怎么调
不是样式没加，而是层叠顺序被压住了。Bootstrap 的 dropdown-menu、modal 默认 z-index 是 1050–1060，而你只给 <th> 设了 <code>z-index: 2，自然被盖住。
调整要点很直接：
<th> 的 <code>z-index至少设为1070（比 modal 高一级）- 确保
<th> 的父级（如 <code><tr>、<code><thead>）没有 <code>overflow: hidden——它会裁剪 sticky 元素的渲染区域 - 如果表格在
modal或offcanvas里，检查这些组件是否用了transform；有的话得把表格抽出来单独滚动，不能嵌套在里面 - 父容器设
overflow: auto（不是overflow-x: auto单独设，要能触发两个方向的 sticky 上下文） <th> 和 <code><td> 都要单独设 <code>position: sticky：表头用top: 0，首列用left: 0- 左上角单元格（
thead th:first-child）必须同时写top: 0; left: 0; - 层级要分清：
z-index: 10（表头）、z-index: 20（首列）、z-index: 30（左上角），三者不能一样
双固定（表头 + 首列）的关键条件
只给 <th> 加 <code>top: 0 不够，首列也要动起来。而且两者交汇处（左上角单元格）必须同时满足两个方向的粘性，否则会出现“缺角”或层级混乱。
必须同时满足以下四点：
真正在意兼容性（比如政务、银行系统还要跑 IE）的话，别硬扛 sticky ——它在 IE 完全不支持，Safari 15.2 之前也有严重偏移 bug。这时候用 transform: translateY() 移动整个 <thead>，配合 <code>IntersectionObserver 监听视口位置，比手动操作每个 style.top 更稳也更轻量。
