必须对包裹表格的<div>容器设置滚动样式，因<table>是独立格式化上下文，不响应overflow，::-webkit-scrollbar等伪元素仅作用于实际触发滚动的块级容器；需同时满足overflow-x: auto、width: 100%、display: block、-webkit-overflow-scrolling: touch及white-space: nowrap等条件，缺一则滚动条无法生成或美化失效。
直接给 <table> 加滚动条美化样式无效，必须对包裹它的 <div> 容器操作 —— 因为滚动行为和伪元素作用对象都在容器上，不是表格本身。
为什么 ::-webkit-scrollbar 不能写在 <table> 上
浏览器只允许 ::-webkit-scrollbar 伪元素作用于「实际触发滚动的块级容器」。而 <table> 默认是独立格式化上下文，不响应 overflow，自然也不支持滚动条样式；即使你强行加了 overflow-x: auto，它也无效，更不会渲染伪元素。
常见错误现象：
-
<table class="scrollable">里写.scrollable::-webkit-scrollbar { ... }—— 完全不生效 - 滚动条还是默认粗细、灰色、无圆角，甚至在 Safari 中完全不显示
真正起作用的，是那个设了 overflow-x: auto 的外层 <div>（比如 <div class="table-wrap">）。
立即学习“前端免费学习笔记（深入）”；
::-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;
}
Firefox 和 Safari 15+ 怎么统一隐藏或美化
WebKit 浏览器用伪元素，Firefox 完全不认这套，得换语法；Safari 15.4+ 虽弃用 -webkit-overflow-scrolling，但不加仍大概率卡顿，所以仍要保留。
- Firefox 隐藏滚动条：用
scrollbar-width: none（推荐），或降级用scrollbar-color: transparent transparent - Firefox 美化能力极弱，基本只能控制显隐，无法自定义轨道/滑块样式
- Safari 15+ 仍需
-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>/
}
移动端滚动条“看不见也摸不着”的真实原因
不是代码没写对，而是滚动容器被意外截断或未被识别为可滚动区域：
- 父级
<div class="card">或<section>设了overflow: hidden—— 直接吞掉滚动条 - 根容器是
<html>，不是<body>，而你只写了body { overflow-x: hidden }—— 无效 -
<th>或<td>里有图片或长 URL，没加max-width: 100%或word-break: break-all—— 内容撑破表格，父容器“感知不到”溢出 - 用了
position: sticky表头，但把<thead>也设成了display: block—— sticky 失效，同时破坏列宽对齐
真正卡点从来不在“怎么画滑块”，而在于“让浏览器承认：这里确实该滚”。display: block + min-width: max-content + white-space: nowrap 这三者缺一不可，否则再漂亮的滚动条样式也只是画饼。
