直接对或.table设position: sticky无效，因浏览器不支持在table元素上触发粘性定位；必须为每个单独设置position: sticky;top: 0;，并确保滚动容器（包裹table的div）有max-height和overflow-y: auto，且祖先无overflow: hidden、transform等阻断属性。
直接给 <thead> 或 <code>.table 加 position: sticky 不生效，是因为浏览器不支持在 display: table-header-group 或 display: table 元素上触发粘性定位。真正起效的是把 sticky 落实到每个 <th> 上，并配好滚动容器和视觉隔离条件。
<h3>为什么 <code><th> 必须单独设 <code>position: sticky
浏览器只对 display: block、inline-block 等常规块级上下文响应 sticky；而 <th> 默认是 <code>table-cell，它依赖表格格式化上下文，top 值会被忽略。只有显式声明 position: sticky; top: 0;，且父容器（如 <tr>）没加 <code>overflow: hidden，才能激活行为。
常见错误现象：
<th> 样式里写了 <code>top: 0但没写position: sticky—— 完全无效- 用了 Bootstrap 的
sticky-top类套在<thead> 上 —— DevTools 显示样式，computed 值里 <code>position仍是static <tr> 上加了 <code>overflow: hidden——<th> 渲染被裁剪，表头“消失” <h3> <code>.table-container必须设max-height和overflow-y: auto没有滚动容器，
sticky就找不到锚点。这个容器不能是<table> 自身，也不能是 <code><thead> 或 <code><tbody> —— 它得是包裹整个 <code><table> 的 <code><div>。 <p>关键参数差异：</p> <ul> <li>用 <code>height: 400px+overflow-y: auto：容器高度固定，内容超长才出滚动条- 用
max-height: 400px+overflow-y: auto：更灵活，内容短时不出现滚动条 - 不能只设
overflow-x: auto：水平滚动不会触发sticky垂直定位 - 不能设
overflow: hidden在任何祖先链上：会切断 sticky 滚动上下文链
列宽错位、文字透底、表头被遮挡怎么调
滚动条出现后，<tbody> 宽度被滚动条挤压，但 <code><thead> 没被压缩，导致列不对齐；没背景色时，滚动中文字会透出底层内容；z-index 太低则被 modal、dropdown 盖住。
<p>必须同步处理这三点：</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img
src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="overflowclass">CSS婚礼策划服务机构宣传网站模板</a>
<p class="overflowclass">CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p>
</div>
<a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<ul><li>给 <code><table> 加 <code>table-layout: fixed; width: 100%，再统一设 th, td { width: 20%; } 或 min-width，避免内容撑开列宽
<th> 必须有 <code>background-color: #fff（不能是 transparent 或继承色），否则滚动时字迹“叠影”
<th> 的 <code>z-index 至少为 1070（Bootstrap modal 是 1050，dropdown-menu 是 1060）
嵌在 modal / offcanvas 里时特别容易失效
Bootstrap 的 .modal 和 .offcanvas 默认用了 transform: translateY() 动画，这会创建新的层叠上下文，直接阻断 sticky 向上查找滚动容器的路径。
此时不能靠改样式绕过，必须重构 DOM 结构：
- 把
<table> 从 <code>.modal-body里抽出来，单独包一层<div class="table-container"> <li>确保该 <code><div> 的任意祖先都没用 <code>transform、filter或will-change - 如果必须嵌套，就放弃
sticky，改用 JS 监听 scroll 手动控制top—— 但性能和语义都差一截
最常被忽略的一点：所有 <th> 和 <code><td> 的 <code>padding、border、box-sizing 必须完全一致。哪怕一个像素的偏差，在固定表头+滚动场景下都会被放大成明显错位。
