表格加overflow-x:auto无效，因table默认display:table不响应overflow，必须用div包裹并设width:100%、overflow-x:auto、-webkit-overflow-scrolling:touch，且table需table-layout:fixed和min-width:fit-content。
为什么表格加了 overflow-x: auto 还是不滚动
不是滚动条“没出来”，而是浏览器根本没判定出溢出。表格默认是 display: table，td 和 th 会根据内容自动撑宽列——哪怕父容器只有 320px，它也硬算出 800px 宽再塞进去，结果整个表格被当做一个“整体块”渲染，overflow-x 失去作用对象。
必须打断这个行为：
-
white-space: nowrap必须加在每个td和th上（只加table或tr无效） - 配合
table-layout: fixed，否则列宽仍由内容动态决定，nowrap也救不回来 - 如果
td里嵌了div或span，需额外设display: inline-block，否则white-space: nowrap对其内部无效 - 某些框架（如 Bootstrap）会给
.table加width: 100%，这会覆盖table-layout: fixed的列宽分配逻辑，得手动重置
包裹容器的写法和常见结构错误
table-responsive 类（或自定义 .table-container）必须是 <table> 的**直接父元素**，中间不能插其他块级容器。<p>常见错误写法：</p>
<ul><li><code><table class="table table-responsive"> —— 类加在 <code>table 上无效
<div><table><tbody class="table-responsive"> —— <code>tbody 不是容器，不响应 overflow<div class="card-body"><div class="table-responsive"><table> —— 如果 <code>.card-body 设了 overflow: hidden，会把滚动条裁掉正确结构只有一种：<div class="table-container"><table class="table"></table></div>，且该 div 不能有 overflow 相关覆盖规则。
iOS Safari 滚动卡顿或一抬手就停
这不是代码错了，是 iOS 渲染策略问题：旧版 iOS（15 及以下）默认禁用非 body 元素的惯性滚动。
解决方式很明确：
- 只对真正需要横向滚动的容器加
-webkit-overflow-scrolling: touch，比如.table-container - 别加在
table、tbody或全局body上——有内存泄漏风险 - 该属性只在
overflow-x值为auto或scroll时生效，hidden下无效 - 现代 iOS 已逐步放宽限制，但若支持 iOS 14 用户，建议用
@supports (-webkit-overflow-scrolling: touch)渐进增强
横向滚动条总出现？先定位溢出源，别急着加 overflow-x: hidden
横向滚动条本质是某个元素悄悄撑出了视口宽度。overflow-x: hidden 加在 body 上，90% 的情况只是掩盖问题，不是解决问题。
快速定位方法：
- 在控制台运行：
console.log(document.body.scrollWidth > window.innerWidth ? '存在横向溢出' : '正常') - 临时给所有块级容器加
outline: 1px solid red，一眼看出哪个框画到了视口外 - 重点盯三类高危元素：
img、table、position: absolute或fixed的弹窗，以及用了white-space: nowrap的行内容器 -
html和body必须同时设overflow-x: hidden才起效；仅设其中一个会失效
真正容易被忽略的是：表格本身没溢出，但包裹它的 div.table-container 因 padding 或 border + box-sizing: content-box 导致净宽度超标——全局重置 * { box-sizing: border-box; } 是底线操作。
