直接对<thead>或.table设position: sticky无效，因浏览器不支持在table元素上触发粘性定位；必须为每个<th>单独设置position: sticky;top: 0;，并确保滚动容器（包裹table的div）有max-height和overflow-y: auto，且祖先无overflow: hidden、transform等阻断属性。
直接给 <thead> 或 .table 加 position: sticky 不生效，是因为浏览器不支持在 display: table-header-group 或 display: table 元素上触发粘性定位。真正起效的是把 sticky 落实到每个 <th> 上，并配好滚动容器和视觉隔离条件。
为什么 <th> 必须单独设 position: sticky
浏览器只对 display: block、inline-block 等常规块级上下文响应 sticky；而 <th> 默认是 table-cell，它依赖表格格式化上下文，top 值会被忽略。只有显式声明 position: sticky; top: 0;，且父容器（如 <tr>）没加 overflow: hidden，才能激活行为。
常见错误现象：
-
<th>样式里写了top: 0但没写position: sticky—— 完全无效 - 用了 Bootstrap 的
sticky-top类套在<thead>上 —— DevTools 显示样式，computed 值里position仍是static -
<tr>上加了overflow: hidden——<th>渲染被裁剪，表头“消失”
.table-container 必须设 max-height 和 overflow-y: auto
没有滚动容器，sticky 就找不到锚点。这个容器不能是 <table> 自身，也不能是 <thead> 或 <tbody> —— 它得是包裹整个 <table> 的 <div>。
立即学习“前端免费学习笔记（深入）”；
关键参数差异：
- 用
height: 400px+overflow-y: auto：容器高度固定，内容超长才出滚动条 - 用
max-height: 400px+overflow-y: auto：更灵活，内容短时不出现滚动条 - 不能只设
overflow-x: auto：水平滚动不会触发sticky垂直定位 - 不能设
overflow: hidden在任何祖先链上：会切断 sticky 滚动上下文链
列宽错位、文字透底、表头被遮挡怎么调
滚动条出现后，<tbody> 宽度被滚动条挤压，但 <thead> 没被压缩，导致列不对齐；没背景色时，滚动中文字会透出底层内容；z-index 太低则被 modal、dropdown 盖住。
必须同步处理这三点：
- 给
<table>加table-layout: fixed; width: 100%，再统一设th, td { width: 20%; }或min-width，避免内容撑开列宽 -
<th>必须有background-color: #fff（不能是transparent或继承色），否则滚动时字迹“叠影” -
<th>的z-index至少为1070（Bootstrap modal 是1050，dropdown-menu 是1060）
嵌在 modal / offcanvas 里时特别容易失效
Bootstrap 的 .modal 和 .offcanvas 默认用了 transform: translateY() 动画，这会创建新的层叠上下文，直接阻断 sticky 向上查找滚动容器的路径。
此时不能靠改样式绕过，必须重构 DOM 结构：
- 把
<table>从.modal-body里抽出来，单独包一层<div class="table-container"> - 确保该
<div>的任意祖先都没用transform、filter或will-change - 如果必须嵌套，就放弃
sticky，改用 JS 监听 scroll 手动控制top—— 但性能和语义都差一截
最常被忽略的一点：所有 <th> 和 <td> 的 padding、border、box-sizing 必须完全一致。哪怕一个像素的偏差，在固定表头+滚动场景下都会被放大成明显错位。
