必须对包裹表格的容器设置滚动样式，因是独立格式化上下文，不响应overflow，::-webkit-scrollbar等伪元素仅作用于实际触发滚动的块级容器；需同时满足overflow-x: auto、width: 100%、display: block、-webkit-overflow-scrolling: touch及white-space: nowrap等条件，缺一则滚动条无法生成或美化失效。
直接给 常见错误现象： 真正起作用的，是那个设了 伪元素只是“化妆”，前提是滚动条得先被浏览器创建出来。漏掉任一条件，美化代码就成摆设： 示例最小可行结构： WebKit 浏览器用伪元素，Firefox 完全不认这套，得换语法；Safari 15.4+ 虽弃用 兼容写法（推荐）： 不是代码没写对，而是滚动容器被意外截断或未被识别为可滚动区域： 真正卡点从来不在“怎么画滑块”，而在于“让浏览器承认：这里确实该滚”。<table> 加滚动条美化样式无效，必须对包裹它的 <code><div> 容器操作 —— 因为滚动行为和伪元素作用对象都在容器上，不是表格本身。<h3>为什么 <code>::-webkit-scrollbar 不能写在 <table> 上<p>浏览器只允许 <code>::-webkit-scrollbar 伪元素作用于「实际触发滚动的块级容器」。而 <table> 默认是独立格式化上下文，不响应 <code>overflow，自然也不支持滚动条样式；即使你强行加了 overflow-x: auto，它也无效，更不会渲染伪元素。<table class="scrollable"> 里写 <code>.scrollable::-webkit-scrollbar { ... } —— 完全不生效overflow-x: auto 的外层 <div>（比如 <code><div class="table-wrap">）。<h3>
<code>::-webkit-scrollbar 必须配合哪些基础样式才能显示
overflow-x: auto —— 必须设在容器上，且内容真实溢出（min-width: max-content + white-space: nowrap 是关键）width 或 max-width —— 容器要有明确宽度约束，fit-content 在旧 Safari 中不可靠display: block —— 显式声明，避免被父级 flex/grid 压缩导致宽度计算失效-webkit-overflow-scrolling: touch —— iOS Safari 必加，否则伪元素可能不触发或卡顿<div class="table-wrap">
<table>...</table>
</div>
<p>.table-wrap {
overflow-x: auto;
width: 100%;
display: block;
-webkit-overflow-scrolling: touch;
}</p><p>.table-wrap::-webkit-scrollbar {
height: 8px;
}</p><p>.table-wrap::-webkit-scrollbar-track {
background: #f5f5f5;
border-radius: 4px;
}</p><p>.table-wrap::-webkit-scrollbar-thumb {
background: #c1c1c1;
border-radius: 4px;
}
</p>
Firefox 和 Safari 15+ 怎么统一隐藏或美化
-webkit-overflow-scrolling，但不加仍大概率卡顿，所以仍要保留。
scrollbar-width: none（推荐），或降级用 scrollbar-color: transparent transparent
-webkit-overflow-scrolling: touch，否则触控拖拽松手即回弹touch-action: pan-y，会拦截横向滑动.table-wrap {
overflow-x: auto;
scrollbar-width: none; /* Firefox */
-webkit-overflow-scrolling: touch; /* Safari/iOS */
}
<p>.table-wrap::-webkit-scrollbar {
display: none; /<em> WebKit 隐藏，或按需设样式 </em>/
}
</p>
移动端滚动条“看不见也摸不着”的真实原因
<div class="card"> 或 <code><section></section> 设了 overflow: hidden —— 直接吞掉滚动条，不是 ，而你只写了 body { overflow-x: hidden } —— 无效<th> 或 <code><td> 里有图片或长 URL，没加 <code>max-width: 100% 或 word-break: break-all —— 内容撑破表格，父容器“感知不到”溢出position: sticky 表头，但把 <thead> 也设成了 <code>display: block —— sticky 失效，同时破坏列宽对齐display: block + min-width: max-content + white-space: nowrap 这三者缺一不可，否则再漂亮的滚动条样式也只是画饼。
