Bootstrap表格小屏横向滚动需用.table-responsive容器包裹table，禁用width:100%和table-layout:fixed，配合text-nowrap、overflow:hidden及text-overflow:ellipsis控制长文本，注意v4/v5响应式类差异及移动端touch事件兼容性。
Bootstrap表格在小屏不换行直接横向滚动
默认情况下，bootstrap的 .table 在手机上会强行压缩列宽、文字换行甚至重叠，根本不会触发水平滚动。想让它“宁可滚动也不折行”，核心就一条：切断内部弹性行为，让表格容器强制溢出。
常见错误是只给 <table> 加 overflow-x: auto —— 没用，因为 <table> 本身不会产生滚动条，得套一层容器。
- 必须用
<div class="table-responsive">包住整个<table>（Bootstrap 5+ 内置类） - 不要手动加
overflow到<table>或<tbody>，它不响应 - 确保表格没有设置
width: 100%或table-layout: fixed后又没设列宽——这会让浏览器放弃计算自然宽度，导致滚动失效
Bootstrap 4 和 5 的 class 差异
.table-responsive 在 v4 和 v5 行为不同：v4 默认只在 sm 及以下生效（max-width: 576px），v5 改成始终启用，除非你显式写 .table-responsive-sm 等断点类。
- Bootstrap 4：直接写
<div class="table-responsive">→ 仅小屏滚动；要全尺寸滚动，得用<div class="table-responsive-xl"> - Bootstrap 5：
<div class="table-responsive">→ 所有尺寸都允许滚动；如只需小屏滚动，改用<div class="table-responsive-md"> - 如果用了自定义 CSS 覆盖了
table-responsive的display: block，滚动会静默失效
内容过长时文字不换行却撑破容器
即使加了 .table-responsive，长单词（如 UUID、URL、base64 片段）仍可能把表格撑爆，导致横向滚动条不出现在预期位置，或出现双滚动条。
- 给
<td>或<th>加style="white-space: nowrap;"是常见误操作——它阻止换行，但不控制溢出，反而加剧撑破 - 正确做法是组合使用：
text-nowrap（Bootstrap 类） +overflow: hidden+text-overflow: ellipsis（需同时设white-space: nowrap和width） - 对代码类字段，推荐用
<code>标签包裹，并额外加style="display: inline-block; max-width: 200px; overflow-x: auto;"
移动端 touch 滚动卡顿或失效
在 iOS Safari 或部分安卓 WebView 中，.table-responsive 容器偶尔无法滑动，拖拽没反应，或只响应垂直方向。
- 检查是否父级元素有
touch-action: none或pointer-events: none—— 这会拦截 touch 事件 - 确保容器设置了
-webkit-overflow-scrolling: touch（iOS 必需，Bootstrap 5 已内置，但自定义覆盖后可能丢失） - 避免在该容器上监听
touchstart并调用preventDefault()，否则滚动被禁用 - 如果用了第三方库（如 swiper、scrollbar 插件），它们可能劫持了原生滚动逻辑
真正麻烦的不是加个 class，而是当表格嵌在 modal、tab-pane 或 flex 容器里时，父级的 min-width、flex-shrink 或 overflow 层层叠加，会让 .table-responsive 失效得毫无征兆。这时候得逐层检查 computed styles，而不是反复改 table 本身。
