给table加overflow-x: auto无效，须用div.table-container包裹并设width:100%、overflow-x:auto及-webkit-overflow-scrolling:touch；table自身禁用width:100%，改用min-width:max-content暴露真实宽度；th/td设overflow-wrap:break-word允许折行；固定表头宜用双层结构或js同步；务必声明viewport meta标签。
直接加 overflow-x: auto 到 <table> 上基本无效——表格是独立格式化上下文，浏览器默认不把它当“可溢出内容”处理。真正起效的方案，是用容器包裹 + 精确控制宽度边界。
<h3>给表格外层加滚动容器，不是给 table 本身</h3>
<p>移动端表格撑宽视口、横向滚动条出现但拖不动，90% 是因为把 <code>overflow-x: auto 错加在了 <table> 元素上。它不响应这个属性。
<ul><li>必须用 <code><div class="table-container"> 包裹 <code><table>
<li>
<code>.table-container 要设 width: 100%（不能只靠 max-width）和 overflow-x: auto
.table-container 还要加 -webkit-overflow-scrolling: touch（仅 iOS Safari 需要，别全局加）<table> 自身**不要**设 <code>width: 100%，否则会掩盖真实宽度，滚动失效
让表格“暴露真实宽度”，靠 min-width: max-content
即使加了滚动容器，如果表格被父级 flex 或 grid 压缩，依然显示不全。关键是要让它能按内容自然展开。
- 给
<table> 加 <code>min-width: max-content，强制它至少展示所有内容所需的最小宽度 - 如果兼容性要求覆盖 iOS 12 以下或 Android 4.4，可用
min-width: 600px替代（数值按实际列数微调） - 同时移除所有
th/td上的固定width（如width: 200px），否则和table-layout: fixed冲突，列宽锁死 - 对
th和td设overflow-wrap: break-word（比word-break: break-word在 Safari 更稳） - 配
white-space: normal和word-break: break-all（仅对纯数字/无空格字符串必要） - 避免全局设
white-space: nowrap—— 它会让表格变宽不可控，且小屏阅读体验差 - 放弃原生
<thead> 固定方案；改用双层结构：<code><div class="table-header"> + <code><div class="table-body">，分别滚动同步 <li>或轻量级 JS 方案：监听容器 <code>scrollLeft，动态设置表头transform: translateX() - 如果语义化要求高（如无障碍），建议小屏直接降级为卡片布局，用
data-label注入字段名
文字换行失控？优先用 overflow-wrap: break-word
小屏下长文本（URL、JSON 字段）挤成一团或强制单行溢出，不是靠 white-space: nowrap 解决，而是要允许合理折行。
固定表头在滚动容器里大概率失败
在 overflow-x: auto 的容器里对 thead th 用 position: sticky，iOS 和 Chrome 都容易错位或消失。这不是 bug，是表格盒模型和 sticky 定位基准不匹配导致的。
最易被忽略的一点：viewport meta 标签缺失或错误，会导致整个页面渲染画布歪掉，再精细的表格 CSS 都白搭。务必确认 中有 <meta name="viewport" content="width=device-width, initial-scale=1">，且没有 maximum-scale 这类过时属性。
