.table-responsive 无滚动条主因是父容器 overflow: hidden 或表格 width: 100% 抑制溢出，需确保其为 table 直接父级、移除 width: 100%、处理长文本截断，并为 iOS 添加 -webkit-overflow-scrolling: touch。
table-responsive为什么加了没滚动条
根本不是类名写错了，而是 Bootstrap 5 的 .table-responsive 默认生效，但滚动行为被父级或表格自身样式悄悄关掉了。最常见的是外层容器（比如 <div class="card-body">）设了 overflow: hidden，直接把滚动条裁掉；或者 <table> 上写了 width: 100%，导致它拒绝撑宽，自然没有内容溢出可滚。
检查方法：在 DevTools 中选中那个 <div class="table-responsive">，看 computed 样式里 overflow-x 是不是 auto，且没被更高优先级规则覆盖。如果不是，就说明被干扰了。
- 确保它是
<table>的**直接父元素**，中间不能插<div class="something"> - 删掉所有对
<table>的width: 100%（包括内联样式和自定义 CSS） - 避免在上层组件（如
<div class="modal-body">或<section>）设overflow: hidden
长文本撑破容器导致滚动失效
即使加了 .table-responsive，一串无空格的长字符串（比如 UUID、base64 片段、URL）仍会让表格宽度失控，滚动条出现在错误位置，甚至出现双滚动条。这不是容器问题，是单元格没约束溢出行为。
单纯加 white-space: nowrap 只会加剧撑破，必须配合截断逻辑。
立即学习“前端免费学习笔记（深入）”；
- 给需要控制的
<th>或<td>加class="text-truncate"（Bootstrap 5 内置），它等价于white-space: nowrap; overflow: hidden; text-overflow: ellipsis; - 若需固定列宽，用
<col width="200">或给第一行<th>设style="width: 200px;"，再配合table-layout: fixed - 对代码类字段，用
<code>包裹，并加style="display: inline-block; max-width: 200px; overflow-x: auto;"
移动端拖不动或回弹严重
iOS Safari 和部分安卓 WebView 对原生 overflow-x: auto 的 touch 滚动支持不完整，默认禁用惯性滑动，表现为划一下就停、松手回弹、横向拖拽完全没响应。
这不是 JS 或 Bootstrap 的锅，是 WebKit 渲染引擎的限制，必须显式开启。
- 给
<div class="table-responsive">加-webkit-overflow-scrolling: touch（Bootstrap 5 默认已包含，但若你覆盖了该类 CSS，可能丢失） - 避免把
.table-responsive套在display: flex或display: grid的父容器里——它们可能触发touch-action: none，拦截事件 - 不要给容器设
height，只设max-height，否则 iOS 可能截断底部内容
自定义滚动条样式但不生效
原生滚动条丑，想美化？::-webkit-scrollbar 系列伪元素只在 WebKit 内核浏览器（Chrome、Safari、Edge）有效，Firefox 不支持，且必须作用在**有滚动行为的元素本身**上。
很多人写到 <table> 或 <tbody> 上，结果无效——因为滚动发生在 <div class="table-responsive"> 上。
- 样式必须挂载在
.table-responsive上，例如：.table-responsive::-webkit-scrollbar { width: 6px; } .table-responsive::-webkit-scrollbar-track { background: #f1f1f1; } .table-responsive::-webkit-scrollbar-thumb { background: #ccc; border-radius: 3px; } - 如果用了
!important覆盖默认样式，记得也加在伪元素规则里，否则可能被 Bootstrap 的重置规则压制 - 别指望 Firefox 用户看到同样效果，它用
scrollbar-width和scrollbar-color，需单独写
