不是写错，是设计如此：Bootstrap 4 的 table-responsive 仅在 max-width: 767.98px 下生效，桌面端 overflow-x 为 visible；需确认版本，BS4 可用 table-responsive-lg 或内联 style="overflow-x: auto" 补救。
table-responsive 加了但桌面没滚动条，是不是写错了？
不是写错，是设计如此。Bootstrap 4 的 table-responsive 只在 max-width: 767.98px（即 sm 断点以下）生效，桌面端压根不加 overflow-x: auto；查 DevTools 会发现该 class 在桌面下 computed 样式里 overflow-x 是 visible。Bootstrap 5 才默认全尺寸启用——版本差异必须先确认。
临时补救（BS4）：
- 直接加内联样式：<div class="table-responsive" style="overflow-x: auto;">
- 或换用带后缀的类：table-responsive-lg、table-responsive-xl
加了 table-responsive 还是不滚动，内容全挤成多行？
根本原因是表格内容自己先折行了，根本没撑开宽度，自然无溢出可滚。table-responsive 不控制换行，只管容器是否允许滚动。
必须配合：
- 给 <td> 或 <th> 加 text-nowrap 类
- 或手动覆盖：white-space: nowrap
- 删掉 table 上显式的 width: 100%（它会强制压缩列宽）
- 避免 table-layout: fixed，除非你给每列都设了 <col width="...">
没动表格，页面却出现横向滚动条？查父级容器
常见真凶不是表格本身，而是嵌套结构出问题：
- <div class="row"> 直接作为最外层元素：它的 margin-left: -15px 会拖出负空间，触发父容器溢出
- container 宽度被改大（比如设成 1200px），而媒体查询断点没同步调整，Y 轴滚动条占位后实际视口不足，导致 X 轴溢出
- 父级元素设了 overflow: hidden、display: flex 且未设 flex-shrink: 0，直接截断 table-responsive 的 overflow-x: auto
移动端滚动卡顿、松手回弹，不是 bug 是渲染限制
iOS Safari 和部分安卓 WebView 对小容器内 overflow-x: auto 滚动优化差，不是 Bootstrap 问题。
有效缓解方式：
- 加 -webkit-overflow-scrolling: touch（仅 iOS 生效）
- 避免在 table-responsive 内部用 transform、will-change 等触发合成层的属性
- 列数超 12 时，用 table-layout: fixed + 显式 <col> 宽度，减少重排
最容易被忽略的点：横向滚动条常不是“表格太宽”，而是“某个父容器悄悄漏出了几像素”——尤其在自定义 container 宽度或混用 row 与 table-responsive 时，得一层层 inspect，别只盯着 <table> 看。
