如何设置水平溢出滚动且滚动条不覆盖表格粘性列

我有一个带有两个粘性列的表格，目前通过以下CSS实现粘性效果：

position: sticky !important;
left: 0;
z-index: 1;
background-color: white;

当前滚动条会直接覆盖左侧的粘性列，影响UI体验；希望实现滚动条不覆盖粘性列的效果，且仅通过CSS完成，不额外创建独立div或表格。

解决方案1：使用scrollbar-gutter实现（现代浏览器推荐） #

这是最简洁的方案，利用CSS原生属性为滚动条预留稳定空间，避免挤压内容：

table {
  overflow-x: auto;
  display: block;
  /* 为滚动条预留两侧稳定空间，确保内容不被挤压 */
  scrollbar-gutter: stable both-edges;
}

保留你原有的粘性列样式即可，滚动条会在表格右侧的预留区域显示，不会覆盖左侧粘性列。

解决方案2：手动预留滚动条宽度（兼容旧浏览器） #

如果需要兼容不支持scrollbar-gutter的浏览器，可手动给表格添加右侧内边距，模拟滚动条空间：

table {
  overflow-x: auto;
  display: block;
  /* 滚动条默认宽度约17px，可根据浏览器实际情况调整 */
  padding-right: 17px;
  box-sizing: border-box;
}

同时注意调整第二个粘性列的left值，要与第一个粘性列的宽度一致（比如第一个列宽为120px，第二个列的left就设为120px），确保两个粘性列都能正确固定且不被滚动条遮挡。

提示：将表格设为display: block后，建议搭配table-layout: fixed并为th/td设置固定宽度，保证表头与表体的列对齐一致。

内容的提问来源于stack exchange，提问作者Adam Mazurkiewicz