Bootstrap表格手机端不滚动，需用包裹表格，确保父容器有宽度约束并启用overflow-x: auto，避免直接设在上；v4/v5中该类默认仅小屏生效，全尺寸需改用.table-responsive-sm或自定义CSS。
Bootstrap表格在手机端不滚动？先确认父容器是否设置了overflow-x: auto
默认情况下，Bootstrap（尤其是v5）的 .table 类没有强制让表格可横向滚动，即使内容超宽，也不会自动出现水平滚动条。关键不是给 <table> 本身加样式，而是用一个包裹 <code><div> 控制溢出行为。
<p>常见错误是直接给 <code><table> 加 <code>overflow-x: auto —— 没用，因为 <table> 是替换元素，不响应该属性；必须包裹一层 <code><div class="table-responsive">（Bootstrap 内置类）或手动设置。
<ul>
<li>Bootstrap v4/v5 都自带 <code>.table-responsive 类，推荐优先使用它，它已预设了 display: block、width: 100% 和 overflow-x: auto
<div> 是块级、有明确宽度（如 <code>width: 100%）、且设 overflow-x: auto 和 -webkit-overflow-scrolling: touch（提升 iOS 滚动流畅度）
<table> 设 <code>width: 100%，否则会压缩列宽、破坏内容可读性；让表格自然撑开宽度
为什么加了overflow-x: auto还是没滚动条？检查这些CSS冲突
最常踩的坑是父级或祖先元素存在 overflow: hidden 或 overflow: clip，直接截断了滚动区域。另外，Flex/Grid 容器若设了 min-width: 0 或 overflow，也可能抑制子元素溢出表现。
- 用浏览器开发者工具检查包裹
<div> 的 computed <code>overflow-x值，确认不是visible（默认值不触发滚动条） - 检查是否有 CSS 框架（如 Tailwind）或自定义样式意外覆盖了
overflow-x，例如.container { overflow: hidden; } - 某些旧版 Android WebView 对
overflow-x支持不全，可加overflow: auto（同时启用 x/y）作为兜底 - v5 中
.table-responsive等效于：@media (max-width: 991.98px) { ... }；如需始终启用，改用.table-responsive-sm（从sm起生效）或自定义类 - v4 中同理，但断点值为
991px；注意 v4 不支持.table-responsive-{breakpoint}变体 - 若表格含
position: sticky表头（如.table-sticky），需额外确保包裹<div> 有 <code>position: relative，否则 sticky 元素可能脱离上下文移动端触摸滚动卡顿？补上
-webkit-overflow-scrolling: touchiOS Safari（尤其旧版本）对
overflow: auto区域的惯性滚动支持较弱，容易卡顿或无法滑动。虽然现代 Safari 已逐步弃用该属性，但兼容性要求高时仍建议保留。- 仅需加在包裹
<div> 上：<code>style="-webkit-overflow-scrolling: touch;" - 注意：该属性在非 WebKit 浏览器中被忽略，无副作用；但它会让 WebKit 引擎启用原生滚动加速
- 不要滥用——只加在真正需要横向滚动的表格容器上，避免影响页面其他滚动区域
最易被忽略的一点：表格内部如果有
white-space: nowrap的单元格（比如代码片段、长 token），它们会阻止换行，导致表格整体异常撑宽；此时应配合text-overflow: ellipsis或限制最大宽度，而不是单纯依赖滚动。 - 仅需加在包裹
.table-responsive 在不同Bootstrap版本里的行为差异
Bootstrap v4.6 和 v5.x 的 .table-responsive 默认只在 max-width: 991.98px（即 lg 断点以下）生效，这意味着桌面端不会加滚动——这通常是期望行为。但如果你需要「所有屏幕都可滚动」，得覆盖默认媒体查询。
立即学习“前端免费学习笔记（深入）”；
