table-responsive 必须用 div 包裹 table，不能直接加在 table 上；需确保父容器无 overflow: hidden；td/th 加 text-nowrap 防折行；iOS 需 -webkit-overflow-scrolling: touch；注意 Bootstrap 4/5 断点差异。
table-responsive 类本身就能解决，但必须用对位置、配对样式、避开常见干扰项，否则在手机上就是不滚动。
必须用 包裹整个 直接给 加 table-responsive 类完全无效——它不是表格修饰类，而是容器类。Bootstrap 靠这个 提供 display: block 和 overflow-x: auto 上下文。
- ✅ 正确写法：
...
- ❌ 错误写法：
、
）- 如果表格在
里，要确认 card-body 没设 overflow: hidden，否则会把滚动条裁掉加 white-space: nowrap 阻止单元格内换行
默认情况下， 里的长文本（如 URL、UUID、时间戳）会自动折行，表格被“压扁”后宽度根本没超出容器，overflow-x: auto 就没东西可滚。- 给所有
和 加 text-nowrap 类，或手动加 CSS：white-space: nowrap- 搭配
overflow-hidden text-truncate 防止单元格被撑爆，例如：https://example.com/very-long-path
- 别只给部分列加，整行统一处理，否则列宽错位
iOS Safari 必须加 -webkit-overflow-scrolling: touch
没有这行 CSS，iOS 上横向拖拽会卡顿、一划就停、松手回弹，体验接近不可用。这不是 Bug，是 WebKit 默认禁用惯性滚动。
- 把它加在
上，而不是 或
- 检查是否被更高优先级规则覆盖：用 DevTools 看 computed 样式里
-webkit-overflow-scrolling 是否为 touch
- 如果父容器用了
display: flex 或 display: grid，可能重置滚动行为，临时改成 display: block 测试是否恢复
注意 Bootstrap 4 和 5 的断点差异
你看到“手机有滚动条、桌面没有”，大概率不是配置错，而是版本逻辑本就如此。
- Bootstrap 4：
table-responsive 只在 max-width: 576px（xs 断点）生效；桌面端该类基本无样式
- Bootstrap 5：
table-responsive 默认全尺寸生效；若只想小屏启用，得用带后缀的类，比如 table-responsive-sm
- 快速确认版本：控制台执行
bootstrap.Version，或查 bootstrap.min.css 文件头注释
真机测试前务必关掉模拟器——很多安卓 WebView 和 iOS Safari 的 touch 事件支持不完整，DevTools 模拟器看不出滚动是否真正可用。最隐蔽的坑是全局样式，比如 * { overflow-x: hidden; } 这种通配符规则，会直接干掉所有横向滚动能力。
直接给 加 table-responsive 类完全无效——它不是表格修饰类，而是容器类。Bootstrap 靠这个 提供 display: block 和 overflow-x: auto 上下文。
- ✅ 正确写法：
...
- ❌ 错误写法：
、
）- 如果表格在
里，要确认 card-body 没设 overflow: hidden，否则会把滚动条裁掉加 white-space: nowrap 阻止单元格内换行
默认情况下， 里的长文本（如 URL、UUID、时间戳）会自动折行，表格被“压扁”后宽度根本没超出容器，overflow-x: auto 就没东西可滚。- 给所有
和 加 text-nowrap 类，或手动加 CSS：white-space: nowrap- 搭配
overflow-hidden text-truncate 防止单元格被撑爆，例如：https://example.com/very-long-path
- 别只给部分列加，整行统一处理，否则列宽错位
iOS Safari 必须加 -webkit-overflow-scrolling: touch
没有这行 CSS，iOS 上横向拖拽会卡顿、一划就停、松手回弹，体验接近不可用。这不是 Bug，是 WebKit 默认禁用惯性滚动。
- 把它加在
上，而不是 或
- 检查是否被更高优先级规则覆盖：用 DevTools 看 computed 样式里
-webkit-overflow-scrolling 是否为 touch
- 如果父容器用了
display: flex 或 display: grid，可能重置滚动行为，临时改成 display: block 测试是否恢复
注意 Bootstrap 4 和 5 的断点差异
你看到“手机有滚动条、桌面没有”，大概率不是配置错，而是版本逻辑本就如此。
- Bootstrap 4：
table-responsive 只在 max-width: 576px（xs 断点）生效；桌面端该类基本无样式
- Bootstrap 5：
table-responsive 默认全尺寸生效；若只想小屏启用，得用带后缀的类，比如 table-responsive-sm
- 快速确认版本：控制台执行
bootstrap.Version，或查 bootstrap.min.css 文件头注释
真机测试前务必关掉模拟器——很多安卓 WebView 和 iOS Safari 的 touch 事件支持不完整，DevTools 模拟器看不出滚动是否真正可用。最隐蔽的坑是全局样式，比如 * { overflow-x: hidden; } 这种通配符规则，会直接干掉所有横向滚动能力。
