滚动条美化在table上基本无效，需将table包裹在display:block且设max-height的div中实现；macos下自定义滚动条常不显示，firefox需用scrollbar-width/color替代::-webkit-scrollbar。
滚动条美化在 table 元素上基本无效
直接对 <table> 或其父容器（如 <code><div>）应用 <code>::-webkit-scrollbar 伪元素，**在多数场景下不会生效**——因为表格的渲染行为受 display: table 及其子元素（tbody、tr、td）的盒模型限制，WebKit 内核（Chrome/Safari）通常拒绝将自定义滚动条样式透传到内部表格结构中。
真正起作用的，是让滚动容器脱离表格默认布局流。常见做法是：把 <table> 包在一个带 <code>overflow: auto 的 <div> 中，并确保该 <code><div> 是一个「标准块级可滚动容器」。<ul>
<li>必须设置 <code>display: block（或保持默认），不能是 display: table
max-height: 400px），否则滚动不会触发table 自身需设 width: 100%，避免内容撑破外层table-layout: fixed 以外的值时，列宽可能错乱；若用了 fixed，记得给 th/td 设 width 或用 col 控制macOS 下滚动条默认隐藏，::-webkit-scrollbar 不触发
macOS（尤其是 Safari 和 Chrome）在“自动隐藏滚动条”系统偏好下，::-webkit-scrollbar 规则压根不会被解析——滚动条未显示时，伪元素不参与渲染，CSS 样式不计算也不生效。
这意味着你写的 ::-webkit-scrollbar-track 或 ::-webkit-scrollbar-thumb 在用户没主动拖动或悬停前，完全不可见、不可调试。
- 开发时建议临时关闭 macOS 系统设置 →「通用」→「显示滚动条」→ 改为「始终」
- 上线后无法强制用户改系统设置，所以必须接受「macOS 用户大概率看不到自定义滚动条」这一事实
- 不要依赖
::-webkit-scrollbar实现核心交互反馈（比如靠颜色提示“可滚动”），它不具备跨平台保障
Firefox 完全不支持 ::-webkit-scrollbar
Firefox 使用 scrollbar-width 和 scrollbar-color 这两个标准 CSS 属性控制滚动条外观，且仅对「可滚动的块级容器」有效 —— 对 <table> 直接设置依然无效。<p>正确写法是对外层包裹 <code><div> 同时应用 WebKit + Firefox 双方案：<pre class="brush:php;toolbar:false;">.scrollable-table-wrapper {
max-height: 300px;
overflow: auto;
scrollbar-width: thin; /* Firefox: "auto" | "thin" | "none" */
scrollbar-color: #6c6c6c #f0f0f0; /* Firefox: thumb track */
}
<p>.scrollable-table-wrapper::-webkit-scrollbar {
width: 8px;
}
.scrollable-table-wrapper::-webkit-scrollbar-track {
background: #f0f0f0;
}
.scrollable-table-wrapper::-webkit-scrollbar-thumb {
background-color: #6c6c6c;
border-radius: 4px;
}
</p></pre>
<p>注意：<code>scrollbar-color 的第二个值是 track 背景，不是边框；且 Firefox 不支持圆角、阴影等复杂样式。
用 position: sticky 固定表头时，滚动条美化易失效
当给 thead th 加 position: sticky; top: 0，部分浏览器（特别是旧版 Chrome）会破坏外层容器的滚动上下文，导致 ::-webkit-scrollbar 失效或滚动区域错位。
- 确保
sticky元素的父容器有明确height或max-height，且设overflow: visible（非hidden） - 避免对
thead或tbody单独设overflow，只对外层<div> 控制<li>如果仍出问题，可尝试加 <code>-webkit-transform: translateZ(0)到外层 wrapper，强制创建新层叠上下文
滚动条美化本身不是刚需功能，它在表格场景下天然受限；真要提升可用性，优先保证列对齐、文字截断、hover 高亮和键盘导航支持 —— 这些比细 2px 的滚动条颜色重要得多。
