直接给table加overflow-x:auto无效，因table是替换元素且默认display:table，不响应overflow属性；必须用块级容器（如div.table-responsive）包裹，设overflow-x:auto、display:block，并确保父级无overflow:hidden等截断样式。
直接给 table 加 overflow-x: auto 无效，必须用块级容器包裹并控制内部行为。
为什么 table 自己加 overflow 不起作用
表格元素是“替换元素”，它的渲染逻辑不响应 overflow。浏览器会强制按内容撑开宽度，哪怕超出视口——滚动条永远不会出现在 table 上。
常见错误操作包括：
- 给
<table> 直接设 <code>style="overflow-x: auto" - 只对
<tbody> 或 <code><thead> 加溢出控制 <li>没切断 <code>table-layout: fixed导致列宽被压缩、文字换行 - Bootstrap 4：
.table-responsive仅在max-width: 576px（sm下）启用水平滚动 - Bootstrap 5：
.table-responsive默认所有尺寸都允许滚动；如需限制小屏才滚动，得写.table-responsive-md或.table-responsive-sm - 若项目混用自定义 CSS 覆盖了
.table-responsive { display: block }，滚动会静默失效 -
white-space: nowrap单独加在<td> 上反而加剧问题——它阻止换行，但不约束溢出 <li>推荐组合：<code>text-nowrap（Bootstrap 类） +overflow: hidden+text-overflow: ellipsis，且必须同时设置width或max-width - 对代码类字段，用
<code>包裹，并额外加style="display: inline-block; max-width: 200px; overflow-x: auto;" - 外层
<div class="table-container"> 必须设 <code>display: block和overflow-x: auto <table> 去掉 <code>width: 100%，避免拉伸失真；禁用table-layout: fixed（除非你手动设了每列width）-
th, td加white-space: nowrap防止自动折行，但要配合min-width或max-width控制极端长度
正确路径只有一条：外层容器负责滚动，table 只管自然展开。
table-responsive 容器的断点行为差异（v4 vs v5）
Bootstrap 4 和 5 对 .table-responsive 的默认生效范围不同，不注意会白配样式。
验证方式：打开开发者工具，检查容器是否为 display: block 且父级未设 overflow: hidden。
长文本（URL/UUID/代码）撑破容器怎么办
即使加了 .table-responsive，纯字母数字长串仍可能突破容器边界，导致滚动条位置异常或双滚动条。
iOS 滑动卡顿？补上 -webkit-overflow-scrolling: touch。
不用 Bootstrap 时的手动实现要点
核心三步不能少，顺序也不能错：
视觉提示别省：底部加轻微阴影或边框，让用户一眼看出“右边还有内容”。
