scrollbar-gutter 不能直接用在 table 或 tbody 上，因为它仅对滚动容器的根级元素生效，而 table、tbody 等非滚动容器加该属性无效；必须作用于包裹表格且设置了 overflow-y: auto/scroll 的 div 容器上。
scrollbar-gutter 能不能直接用在 table 或 tbody 上
不能。scrollbar-gutter: stable 只对**滚动容器**生效，且必须作用于该容器的根级元素（如 html 或带 overflow 的 div），table、thead、tbody 本身不是滚动容器，加了也无效。
表格滚动条实际由包裹它的 div 产生 —— 所以占位逻辑必须落在那个 div 上，而不是表格内部任何标签。
正确写法：给包裹 div 设置 scrollbar-gutter
假设你用 div.table-container 包裹 table，并设了固定高度和 overflow-y: auto：
div.table-container {
height: 400px;
overflow-y: auto;
scrollbar-gutter: stable; /* ✅ 必须写在这里 */
}这个 div 就是真正的滚动容器，scrollbar-gutter 在这里才起作用。
立即学习“前端免费学习笔记（深入）”；
-
scrollbar-gutter: stable会让该div始终预留滚动条宽度空间，哪怕内容没溢出 - 滚动条出现/消失时，表格内容不会左右跳动
- 无需计算滚动条宽度（Windows 17px、macOS 12px、自定义主题可能更窄或更宽）
不支持 scrollbar-gutter 时的 fallback 方案
Chrome 93 以下、Safari 16.3 以下等旧浏览器会忽略 scrollbar-gutter，此时需降级为强制显示滚动条槽位：
div.table-container {
height: 400px;
overflow-y: scroll; /* ❗不是 auto，必须是 scroll */
}这样滚动条始终占位，视觉稳定，缺点是空容器里也会看到一道细缝（但比布局抖动可接受得多）。
别用 overflow: overlay 或 calc(100% - 17px) —— 前者只在 Chrome 有效，后者在 macOS 或高 DPI 屏幕上直接失效。
为什么 table 内部加 scrollbar-gutter 没用还容易踩坑
常见错误写法：
table { scrollbar-gutter: stable; } /* ❌ table 不滚动，无效 */
tbody { scrollbar-gutter: stable; } /* ❌ tbody 不是 overflow 容器，无效 */
div.table-container { overflow-y: hidden; scrollbar-gutter: stable; } /* ❌ hidden 禁用 gutter */关键点只有两个：容器必须可滚动（overflow-y: auto 或 scroll），且属性必须写在该容器自身上。其他地方加，等于没加。
真正难的不是写对一行 CSS，而是意识到：表格滚动条的“占位问题”，本质是父容器的布局稳定性问题，不是表格样式问题。把注意力放在 div.table-container 上，就对了。
