根本原因是表格默认 display: table 且内容撑宽父容器，导致 overflow-x 失效；必须用块级包裹容器（如 .table-responsive）、table-layout: fixed、white-space: nowrap 协同处理。
Bootstrap 表格横向滚动为什么加了 overflow-x: auto 没反应？
根本原因是 Bootstrap（尤其是 v5+）默认给 .table 加了 display: table，而该显示模式下子元素（tr、td）的宽度会强制撑开父容器，导致 overflow-x 失效。单纯在表格外层 div 上设 overflow-x: auto 不够，必须阻断表格内容“溢出即撑宽”的行为。
实操建议：
- 容器必须是块级元素且明确设
width或max-width（比如width: 100%），否则overflow无参照基准 - 表格本身要加
table-layout: fixed，强制按列宽分配空间，防止内容动态撑宽 - 给
th和td设置white-space: nowrap+overflow: hidden+text-overflow: ellipsis，避免单格内文本换行破坏滚动逻辑 - 不要给
.table直接设width: 100%，它会覆盖table-layout: fixed的效果
Bootstrap 5 中最简可用的响应式滚动表格结构
不用 JS、不依赖额外插件，纯 CSS 就能跑通。关键在于容器、表格、单元格三层配合：
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th scope="col">ID</th>
<th scope="col">用户名</th>
<th scope="col">邮箱</th>
<th scope="col">操作日志（超长字段）</th>
</tr>
</thead>
<tbody>
<tr><td>1</td><td>admin</td><td>admin@example.com</td><td>2024-03-15 10:22:34 POST /api/v1/users/update ...</td></tr>
</tbody>
</table>
</div>对应 CSS（Bootstrap 5 默认已含 .table-responsive，但需确认是否启用）：
立即学习“前端免费学习笔记（深入）”；
.table-responsive {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.table {
table-layout: fixed;
width: 100%;
}
.table th,
.table td {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* 可选：限制首列最小宽度，防压缩过度 */
.table th:first-child,
.table td:first-child {
min-width: 60px;
}为什么用 .table-responsive 而不是自己写 class？
Bootstrap 5 内置的 .table-responsive 不只是加 overflow-x: auto，它还做了几件关键的事：
- 在小屏幕（
max-width: 575.98px）下才启用横向滚动，避免桌面端出现多余滚动条 - 对
table子元素做display: block重置，绕过原生表格渲染限制 - 适配移动端 touch 滚动惯性（
-webkit-overflow-scrolling: touch） - 与
.table-dark、.table-bordered等修饰类兼容良好
如果你手动写 overflow-x: auto 却没生效，大概率是漏掉了媒体查询条件或没处理 display 层级冲突。
移动端 Safari 滚不动？检查这三点
iOS Safari 对 overflow-x 的支持比较挑剔，常见卡点：
-
table或其父容器缺少-webkit-overflow-scrolling: touch，滚动会卡顿甚至失效 - 容器有
transform（如translateZ(0)）或will-change，可能触发硬件加速但破坏 overflow 行为 - 表格内嵌了
form、input或button，iOS 会自动聚焦并弹出键盘，挤占滚动区域高度
临时验证方式：在 Safari 开发者工具中删掉所有 transform 相关样式，再试滚动。如果恢复了，就说明是渲染层冲突。
固定宽度列、长文本截断、touch 惯性支持——这些细节不显眼，但少一个，横向滚动在某个设备上就可能彻底失灵。
