必须用<div>包裹<table>才能自定义滚动条，因为<table>不产生滚动上下文，overflow被忽略；只有块级容器设固定尺寸+overflow才触发滚动机制，且::-webkit-scrollbar等伪元素需作用于该<div>上。
直接给 <table> 元素加 ::-webkit-scrollbar 不生效，必须套一层 <div> 容器并控制其溢出行为，否则滚动条根本不会出现，更谈不上定制。
为什么表格必须用 div 包裹才能加滚动条
表格本身不产生滚动上下文，overflow 在 <table> 上被忽略。只有块级容器（如 <div>）设置了固定尺寸 + overflow 才会触发滚动机制。
-
<div class="table-wrapper"><table>...</table></div>是唯一可靠结构 - 该
<div>必须显式设height或max-height（垂直滚动）或width（水平滚动） - 仅设
overflow: auto但没限制尺寸，滚动条永远不会出现 - 若表格内容过少，即使设了
height，overflow-y: auto也不会显示滚动条——这是正确行为，不是 bug
::-webkit-scrollbar 在表格容器上怎么写才有效
伪元素必须绑定到包裹 <table> 的那个 <div> 上，且整套规则不能缺漏。
- 必须写
.table-wrapper::-webkit-scrollbar { width: 8px; }——漏掉这句，后面所有伪元素都失效 -
.table-wrapper::-webkit-scrollbar-track建议加background和border-radius，但别用box-shadow（不渲染） -
.table-wrapper::-webkit-scrollbar-thumb的background是刚需，不设就是透明不可见 - 悬停效果必须用
.table-wrapper::-webkit-scrollbar-thumb:hover单独写，对.table-wrapper:hover加样式无效 - 不要写
::-webkit-scrollbar-button或::-webkit-scrollbar-corner，macOS Safari 基本不认
Firefox 和 Safari 的兼容性怎么兜底
Firefox 只认 scrollbar-width 和 scrollbar-color，Safari（尤其 macOS）基本只响应系统策略，CSS 控制力极弱。
立即学习“前端免费学习笔记（深入）”；
- 在
.table-wrapper上写scrollbar-width: thin; scrollbar-color: #666 #eee;，仅对 Firefox 生效 -
scrollbar-color第二个值是轨道色，设成transparent会导致轨道消失但滑块仍可拖——体验断裂，别这么干 - Safari 16.4+ 才开始支持
scrollbar-width，但实测多数版本仍当auto处理；::-webkit-scrollbar在 Safari 上完全无效 - macOS 若开启“自动隐藏滚动条”，所有 CSS 设置直接被无视——这不是 bug，是系统级限制
- 真要跨浏览器统一外观，要么降级为默认样式，要么用
@supports (-webkit-appearance: none)检测后加载 JS 方案（如 simplebar）
最常被忽略的点：自定义滚动条不是“加个样式就完事”，而是要先确保滚动上下文存在、再分内核处理、最后接受 Safari 的不可控性。写完记得在 macOS Safari 里手动打开系统设置 → 辅助功能 → 显示滚动条，否则连测试条件都不满足。
