scrollbar-gutter 必须写在滚动容器（如包裹 table 的 div）上，而非 table 或 tbody；该属性仅对设置 overflow-y: auto/scroll 且有显式高度的父容器生效，旧浏览器需通过 @supports 回退至 overflow-y: scroll。
scrollbar-gutter 必须写在滚动容器上，不是 table 本身
很多人一上来就给 table 或 tbody 加 scrollbar-gutter: stable，结果没效果——因为该属性只对「滚动容器」生效，而 table 默认不滚动，tbody 也不是 overflow 容器。真正产生滚动条的是包裹它的 div，所以占位逻辑必须落在那个 div 上。
常见错误写法：
-
table { scrollbar-gutter: stable; }→ ❌ 无效，table 不是滚动容器 -
div.table-container { overflow-y: hidden; scrollbar-gutter: stable; }→ ❌hidden禁用 gutter
正确做法：确保包裹 div 同时满足两个条件：overflow-y: auto（或 scroll）+ scrollbar-gutter: stable。
怎么写才真正生效：容器高度 + overflow + gutter 三者缺一不可
仅加 scrollbar-gutter: stable 不够，它必须配合可触发滚动的布局条件。典型配置如下：
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
div.table-container {
height: 400px;
overflow-y: auto;
scrollbar-gutter: stable;
}
关键点：
-
height（或max-height）必须显式设置，否则内容撑开容器，永远不触发滚动 -
overflow-y: auto是推荐值；scroll也能用，但会始终显示滚动条轨道 - 不要用
overflow: overlay—— 非标准、仅 Chrome 支持，Safari/Firefox 直接忽略
不支持 scrollbar-gutter 的浏览器怎么 fallback
Chrome 93 以下、Safari 16.3 以下等旧版本会直接忽略 scrollbar-gutter。此时不能靠 JS 检测再注入样式，而是用 CSS 层叠降级：
div.table-container {
height: 400px;
overflow-y: auto;
scrollbar-gutter: stable;
}
<p>@supports not (scrollbar-gutter: stable) {
div.table-container {
overflow-y: scroll;
}
}</p>
这样既保持现代浏览器的「有空间不显示」体验，又让旧浏览器退回到「始终占位」状态。注意：overflow-y: scroll 虽然空内容时也显细缝，但比布局跳动更可控；别用 calc(100% - 17px)，滚动条宽度在不同系统下差异大（Windows 17px、macOS 12px、高 DPI 可能更宽）。
横向滚动表格也要预留 scrollbar-gutter 吗？
要，但方向得换。垂直滚动靠 overflow-y 和 scrollbar-gutter: stable，水平滚动则依赖 overflow-x，而 scrollbar-gutter 默认只管垂直方向的留白。目前规范中没有 scrollbar-gutter: stable both 这种写法，所以水平滚动需额外处理：
- 若只需横向滚动，设
overflow-x: auto+scrollbar-gutter: stable（它仍会预留垂直滚动条位置，但不影响水平行为） - 若同时需要 xy 滚动，
scrollbar-gutter: stable仅保障 y 方向不跳动；x 方向跳动需靠min-width: max-content配合固定容器宽度来缓解 - 真正难的不是加一行 CSS，而是意识到：表格滚动条占位问题，本质是父容器的布局稳定性问题，不是表格内部样式问题
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
