chrome中sticky表头抖动的根源是overflow: auto导致滚动条动态显隐引发宽度突变和重排循环，需配合overflow-y: scroll、max-height、table-layout: fixed及th样式优化共同解决。
Chrome 中 sticky 表头抖动的根源是 overflow: auto
不是 position: sticky 本身有问题，而是它常被套在 overflow: auto 的容器里——Chrome 会根据内容是否溢出动态显示/隐藏垂直滚动条，导致容器宽度突变（约 17px），触发内部表格列重排 → 高度变化 → 滚动条又消失 → 循环抖动。这种抖动在 Firefox 或 Safari 中不明显，纯属 Chrome 渲染机制差异。
必须同时设置 overflow-y: scroll + 固定高度
只改 overflow-y: scroll 不够，必须搭配显式高度约束，否则浏览器仍可能按内容撑高，失去“预留滚动条空间”的意义：
-
max-height比height更实用，适配内容动态增长场景 - 避免用
100vh，移动端地址栏缩放会导致vh值跳变，放大抖动 - 推荐值如
max-height: 70vh或max-height: 400px，需结合实际容器位置校准 - 顺手加
overflow-x: hidden，防止意外水平溢出干扰垂直滚动逻辑
table-layout: fixed 和 th 样式缺一不可
sticky 表头在表格中失效或抖动，往往不是定位问题，而是列宽计算失准：
-
table必须设table-layout: fixed，否则列宽随内容伸缩，top: 0锚点漂移 -
th要有background-color（透明背景滚动时易闪白）和z-index: 10（低于 10 可能被 tbody 遮盖） -
white-space: nowrap+overflow: hidden防止文字换行引发高度突变 - 避免给
th设margin-bottom或依赖 margin 折叠留空，这会让 sticky 区域计算错位
嵌套滚动容器要逐层检查
一个常见盲区：你以为只改了表格外层容器，但侧边栏、卡片、modal 内部也用了 overflow: auto，它们同样会因滚动条闪现引发级联抖动：
- 用 Chrome DevTools 的 Elements 面板，临时禁用疑似元素的
overflow或height，观察抖动是否消失 - 重点关注带内联
style="overflow: auto"或style="max-height: ..."的节点 - 不要用
::-webkit-scrollbar { display: none }“假装没滚动条”——它不解决占位问题，抖动照旧 - 若必须隐藏滚动条视觉，用外层
div包裹表格，设overflow: hidden，内部再设overflow-y: auto+padding-right: 17px模拟占位
table-layout: fixed 的表格、一个用 overflow: auto 的卡片、一个没加 z-index 的 th——三者叠加，抖动就藏得极深。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
