scrollbar-color 对 <table> 无效，仅对设置了 overflow 的块级容器在 Firefox 中生效；必须用外层 <div> 包裹表格并设 overflow-y: auto 才能启用该属性。
直接说结论：scrollbar-color 对 HTML 表格（<table>）本身无效，它只作用于设置了 overflow 的块级容器，且仅在 Firefox 中生效 —— 而表格元素默认不触发滚动，必须用外层 <div> 包裹并设 overflow 才能启用滚动条。
为什么 scrollbar-color 不能直接写在 <table> 上
scrollbar-color 是 Firefox 的原生滚动条控制属性，但它有硬性限制：只对根元素（html）或显式设置了 overflow: auto | scroll 的**块级元素**生效。而 <table> 是表格渲染盒（table box），即使内容溢出，也不会自行产生滚动上下文 —— 它不会响应 scrollbar-color，写了也完全被忽略。
- 常见错误现象：给
<table class="data-table">直接加scrollbar-color: #5a67d8 #f8fafc;，结果毫无变化 - 真正起作用的必须是包裹它的
<div>，且该<div>必须满足两个条件：①display: block（默认就是）；②overflow-y: auto或类似值 - Firefox 不支持在
<table>、<tbody>、<tr>等表格相关标签上使用scrollbar-color，也不支持伪类如::-moz-scrollbar（已废弃）
正确写法：包裹容器 + Firefox 专属声明
要让表格区域滚动条在 Firefox 中显示指定配色，必须把 <table> 放进一个带 overflow 的 <div>，然后把 scrollbar-color 写在这个 <div> 上：
.table-wrapper {
max-height: 400px;
overflow-y: auto;
scrollbar-color: #5a67d8 #f8fafc; /* thumb color first, then track */
}注意顺序不能反：scrollbar-color: <thumb-color> <track-color> —— 第二个值是轨道色，设成 transparent 会导致轨道“消失”，但滑块仍可拖动，视觉割裂，不推荐。
立即学习“前端免费学习笔记（深入）”；
- 这个声明只在 Firefox 有效，Chrome/Edge/Safari 完全无视它
- 若同时想兼容 WebKit 内核，需额外加
::-webkit-scrollbar系列规则，且必须成套出现（::-webkit-scrollbar、::-webkit-scrollbar-track、::-webkit-scrollbar-thumb缺一不可） - 不要指望它和 WebKit 下的圆角、阴影效果一致 ——
scrollbar-color是纯颜色开关，不支持border-radius、box-shadow等任何修饰
Firefox 下表格滚动条的实际表现限制
即使正确设置了 scrollbar-color，也要接受它的现实约束：
- 宽度不可调：
scrollbar-width只有auto、thin、none三个值，thin是唯一可用的“微调”选项，但无法精确控制像素值（比如不能写scrollbar-width: 8px） - 仅影响主色调：系统暗色模式、高对比度设置可能覆盖你的
scrollbar-color声明，尤其在 Windows 和 macOS 上 - 嵌套失效：如果
.table-wrapper在另一个overflow容器里，且父容器没设scrollbar-color，子容器的声明大概率被忽略 - iOS/macOS Safari 无视该属性：Safari 16.4+ 才开始识别
scrollbar-color，但仅限于根html元素，对普通<div>仍无效
真正需要跨浏览器统一外观时，别在 scrollbar-color 上反复调试 —— 它只是 Firefox 的“低保真开关”，不是设计工具。要么接受各浏览器差异，要么用 simplebar 这类 JS 库接管滚动逻辑，否则永远卡在“看起来差不多但总差一点”的状态里。
