bootstrap表格移动端不滚动是设计使然，需用.table-responsive容器包裹table实现横向滚动，而非直接加类；注意ios兼容性、父容器布局及宽度触发条件。
手机端表格不滚动，只换行挤压？这是默认行为
Bootstrap 的 .table 类在小屏下不会自动触发横向滚动，而是强制压缩列宽、折行、甚至文字重叠——这不是 bug，是设计使然。它假设你希望“内容优先可见”，而非“结构完整可滚动”。但实际业务中，尤其是后台数据表，列名和对齐关系比单行换行更重要，这时就得主动干预。
关键点在于：不能只给 <table> 加 <code>overflow-x: auto，它本身是块级容器但不具备溢出裁剪能力；必须用一个带 overflow-x: auto 的外层容器包裹整个 <table>。
<ul><li>正确做法：用 <code><div class="table-responsive"> 包住 <code><table>（Bootstrap 4/5 内置类）
<li>错误写法：<code><table class="table table-responsive"> —— 这个类不存在，也不会生效
<li>若用的是 Bootstrap 3，需手动加容器并设 <code>overflow-x: auto，且要补 -webkit-overflow-scrolling: touch 提升 iOS 滚动跟手度
用 table-responsive 容器后还是滑不动？检查这三处
常见现象是加了容器却无法水平滑动，多数卡在 CSS 层级或 HTML 结构上：
<table> 外层不能有 <code>display: flex或display: grid的父容器，会破坏表格的固有布局流- 确保没有全局样式覆盖了
.table-responsive的overflow-x，比如某些 UI 框架重置了overflow - 移动端 WebKit 浏览器（尤其 iOS Safari）对
overflow-x: auto的触发很敏感：表格总宽度必须**严格大于容器宽度**，哪怕只多 1px；可用white-space: nowrap配合min-width: max-content强制撑开 - 保留原始列结构，排序、筛选、导出等操作逻辑不变，前端代码几乎不用改
- 适合字段语义强、不可合并的场景（如日志表、审计表、SQL 查询结果）
- 比“堆叠成卡片”或“点击展开详情”更节省 DOM 节点，渲染压力小
- 用户需要主动左右滑，首次访问容易忽略右侧内容，尤其无视觉提示时
- 触控精度低：小屏上手指滑动易误触行内按钮，建议配合
touch-action: pan-y锁定垂直滚动方向 - 无法解决“列太多导致滑动距离过长”的问题——这时候该考虑用
mobileResponsive: true（Bootstrap Table 插件）隐藏非关键列，或改用.table-flip-scroll（ModularAdmin 方案）固定表头+滚动内容 - iOS 上滚动后松手，表格可能回弹，导致关键列（如操作列）瞬间消失——加
overscroll-behavior-x: contain禁止连锁滚动 - 滚动时表头没固定，上下滑动后找不到列名对应关系——要么用
position: sticky（注意兼容性），要么上flip-content类方案 - 没有滚动指示器，用户不知道“还能往右”，可在容器底部加一条渐变遮罩或动态显示滚动进度条（用
scrollLeft+scrollWidth计算）
横向滚动的优缺点很现实，别被“响应式”三个字带偏
优点直击痛点：
缺点也得认：
真正在意体验，就得处理滑动后的“看不见的细节”
横向滚动只是第一步，后续交互链路断了照样难用：
这些细节不写进文档，但上线后第一个被业务方指着问“为什么手机上看不全操作按钮”。
