必须用 table-responsive 容器包裹整个 table，而非直接加在 table 标签上；它依赖 display: block 和 overflow-x: auto 生效，且仅对直接父级块元素有效。

手机端表格不滚动，不是 Bootstrap 没功能，而是你没用对容器、没破掉表格的“自适应压缩”本能。

必须用 table-responsive 包裹整个 <table>，不能加在标签上 <p>直接写 <code><table class="table table-responsive"> 完全无效——<code>table-responsive 是容器类，不是表格类。它靠 display: block + overflow-x: auto 生效，只对块级父元素起作用。

• ✅ 正确：<div class="table-responsive"><table class="table">...</table></div>
• ❌ 错误：<table class="table table-responsive">、<code><div class="table-responsive"><tbody>...</tbody></div>、或套在 <card-body></card-body> 里却没确保它是直接父级
• 检查 DevTools：选中那个 div.table-responsive，确认 computed 样式里 overflow-x 真是 auto，且没被 overflow: hidden 覆盖

table-responsive 在 Bootstrap 4 和 5 中默认行为完全不同

你看到“有滚动条”或“没滚动条”，大概率是因为版本和断点逻辑没对齐。

• Bootstrap 4：table-responsive 默认只在 sm（table-responsive-lg 或手动加 style="overflow-x: auto"
• Bootstrap 5：table-responsive 默认从 sm（≥576px）起生效；若需 xs（table-responsive-xs（部分定制版支持）或补 CSS：.table-responsive { overflow-x: auto !important; }
• 快速验证：打开控制台输入 bootstrap.Version，看实际加载的是哪个大版本

滚动条出来了但拖不动？iOS Safari 和安卓 WebView 常见卡顿

原生 overflow-x: auto 在移动端触控体验差，不是 bug，是默认限制。


VPS Bootstrap
从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。
下载
• 必须加 -webkit-overflow-scrolling: touch 到 table-responsive 容器上，否则 iOS 上一划就停、松手回弹
• 检查父级是否设了 touch-action: none（常见于轮播图、地图组件包裹层），它会禁用子元素所有 touch 滚动
• 避免把 table-responsive 放进 display: flex 或 display: grid 的直接子项里——flex/grid 容器可能重置其 overflow 行为
• 长文本（如 UUID、URL）撑爆列宽？给 <th> 或 <code><td> 加 <code>text-truncate 或 text-nowrap 配合 min-width 控制，别放任自由伸展

  想固定首列、其余列可滚动？别碰 table-responsive 里的 sticky

  table-responsive 的 display: block 会干扰 position: sticky 的滚动上下文，强行加 top: 0 或 left: 0 很容易错位、消失、透底。

  • ✅ 可行方案：弃用 table-responsive，改用自定义容器 <div class="table-container">，并手动设 <code>overflow-x: auto + -webkit-overflow-scrolling: touch
  • 仅对首列单元格（<th class="static-column"> / <code><td class="static-column">）加 <code>position: sticky; left: 0; background-color: white; z-index: 10;
  • 移除其他所有列的 sticky 声明——它们不需要，加了反而冲突
  • 务必显式声明 background-color，否则滚动时文字底下会透出旧内容

  最常被忽略的一点：滚动不是目的，可读性才是。如果表格列数超过 5–6 列、字段含大量长文本或操作按钮，与其硬调滚动，不如在移动端切到卡片视图（用 bootstrap-table-mobile.js）或用 d-none d-md-table-cell 隐藏非关键列——用户真的不会拖着屏幕找“创建时间”。