如何解决Windows与Mac端Chrome滚动条布局不一致问题？

针对你遇到的Windows和Mac Chrome滚动条占位差异导致表格列布局错乱的问题，完全可以通过CSS解决，给你两个实用方案：

方案一：统一滚动条样式（强制占位） #

直接自定义WebKit滚动条样式，让Mac端滚动条也和Windows端一样始终占用固定宽度，彻底对齐布局：

/* 替换成你的tbody容器类名 */
.table-tbody::-webkit-scrollbar {
  width: 17px; /* 匹配Windows默认滚动条宽度 */
}

/* 滚动条轨道样式 */
.table-tbody::-webkit-scrollbar-track {
  background-color: #f5f5f5;
}

/* 滚动条滑块样式 */
.table-tbody::-webkit-scrollbar-thumb {
  background-color: #ccc;
  border-radius: 8px;
  /* 加边框让滑块和轨道间有间隙，更美观 */
  border: 4px solid #f5f5f5;
}

/* 滑块hover状态 */
.table-tbody::-webkit-scrollbar-thumb:hover {
  background-color: #999;
}

设置后，Mac端Chrome的滚动条会始终显示并占用17px宽度，和Windows端保持一致，从根源避免列宽错位。

方案二：给最后一列预留滚动条宽度 #

如果不想改变滚动条的显示行为，也可以通过给表头和表体的最后一列添加右侧内边距，提前预留出滚动条的占用空间：

/* 表头最后一列 */
.table-header th:last-child {
  padding-right: 17px;
}

/* 表体最后一列 */
.table-tbody td:last-child {
  padding-right: 17px;
}

这种方式兼容Mac端的悬浮滚动条，同时让Windows端滚动条不会挤压最后一列内容，布局也能保持一致。

补充：兼容Firefox #

如果需要兼容Firefox浏览器，可以额外添加以下属性：

.table-tbody {
  scrollbar-width: thin; /* 可选值：auto/thin/none，这里用thin接近Chrome的宽度 */
}

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