table-responsive必须加在外层上才生效，直接加在标签无效；其依赖display: block和overflow-x: auto，且需确保父容器无overflow-x: hidden、表格内容能自然溢出、移动端加-webkit-overflow-scrolling: touch并配合white-space: nowrap防换行。

table-responsive加在

上，不是上

直接给<table>加<code>table-responsive类完全无效——Bootstrap 5 的这个类只对块级容器生效，它内部依赖display: block和overflow-x: auto。一旦写成<table class="table table-responsive">，CSS 规则压根不匹配，滚动行为零启动。<p>必须用标准结构：</p> <pre class="brush:php;toolbar:false;">&lt;div class=&quot;table-responsive&quot;&gt; &lt;table class=&quot;table&quot;&gt; ... &lt;/table&gt; &lt;/div&gt;</pre> <p>且这个<code><div>必须是<code><table>的**直接父元素**。如果中间夹了<code><div class="card-body">之类，要检查它是否设了<code>overflow: hidden或display: flex，这些都会静默截断滚动能力。

为什么加了table-responsive还是没滚动条

常见原因不是类没加对，而是被更高优先级样式覆盖或表格自己“拒绝溢出”：

• 父容器（比如、<main></main>或某个 CMS 模板 wrapper）有overflow-x: hidden，直接干掉所有横向滚动
• 全局重置写了* { overflow: hidden }，这种通配符会无差别封杀
• <table>被设了<code>width: 100%，导致列宽被压缩、文本换行，整张表缩进适应屏幕，根本没超出容器宽度
• 浏览器计算后该<div class="table-responsive">的<code>overflow-x实际值是hidden或visible，不是auto——务必用开发者工具看 computed 样式

  移动端 touch 滚动卡顿或划不动

  iOS Safari 和部分安卓 WebView 默认禁用横向惯性滚动，手指一划就停，松手回弹，体验接近不可用。这不是 JS 或 Bootstrap 的问题，是原生滚动策略限制。

  必须手动开启触控惯性：

  

  VPS Bootstrap

  从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

  下载
  • 给包裹表格的<div class="table-responsive">加 CSS：<code>-webkit-overflow-scrolling: touch
  • 不要加在<table>或<code><tbody>上，它只对设置了<code>overflow-x: auto的块级容器生效
  • 若用了自定义主题或 CMS，确认没被更高优先级规则覆盖（DevTools 中看 computed 样式）

  漏掉这一行，iOS 上基本没法滑；加上之后，拖拽才顺滑。

  文字换行导致表格不溢出，怎么破

  默认情况下，<td>里的长 URL、UUID 或英文单词会自动折行，表格被“压扁”，宽度没超出容器，自然触发不了滚动。这不是 bug，是浏览器默认行为。<p>解决方式是三层配合，缺一不可：</p> <ul><li>给<code><th>和<code><td>加<code>white-space: nowrap（可用 Bootstrap 的text-nowrap类）

  • 再配overflow: hidden + text-overflow: ellipsis，避免单格撑破
  • 不要只给某几列加，整行统一处理，否则列宽错位

  示例：<td class="text-nowrap overflow-hidden text-truncate">https://example.com/very-long-path</td>

  注意：别对整个<table>设<code>table-layout: fixed又不指定列宽，这会让浏览器放弃计算自然宽度，反而让滚动失效。