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