直接加 overflow-x: auto 对 table 无效，因 table 默认 display: table 不响应 overflow；需外层 div 设 width: 100%、-webkit-overflow-scrolling: touch（ios）、min-width: 0（若为 flex 子项），table 自身禁用 width: 100%，配合 table-layout: fixed、min-width: max-content 及 colgroup 控制列宽，并慎用固定宽和 white-space 设置。
为什么直接加 overflow-x: auto 没用
浏览器根本不认 <table> 上的 <code>overflow-x: auto——滚动必须由块级容器触发，而 <table> 默认是 <code>display: table，不响应 overflow。常见现象是：加了样式但没滚动条、有滚动条却拖不动、松手就回弹、横屏时突然撑满整个页面。
- 外层
<div> 必须设 <code>width: 100%（不能只靠max-width），否则浏览器无法判断“溢出多少” <table> 自身绝不能设 <code>width: 100%，它会覆盖table-layout: fixed的列宽逻辑，导致列宽死锁- iOS Safari 必须在外层容器加
-webkit-overflow-scrolling: touch，否则滚动卡顿、无惯性、松手回弹 - 若外层是
display: flex子项，务必加min-width: 0，否则 flex item 默认不收缩，滚动直接锁死 - 必须配
min-width: max-content或min-width: fit-content（Safari 14.1+/Chrome 107+ 支持），让表格按真实内容宽度撑开；旧版 Safari 可退为min-width: 600px（按列数粗估） - 禁用所有
th/td上的固定width（如width: 200px），否则列宽被硬锁，文字换行失效 - 列宽控制优先用
<colgroup></colgroup>：<col width="120"> <col width="200">，兼容性比 CSSwidth属性更稳 -
th/td必须加white-space: nowrap+overflow-wrap: break-word（不是word-break: break-word，Safari 对后者支持不稳定） - 用
data-label注入语义：<td data-label="订单号">ORD-2026-XXXX</td>，CSS 中通过::before插入标签，实现“键值对”展示 - 每行转为一个
<article class="card"></article>，内部用display: grid或flex布局，gap设为12px（小屏）→24px（大屏） - 保留原生
<table> 仅用于无障碍场景时，可 JS 动态切换 DOM 结构：小屏下 clone 行数据生成卡片，隐藏原表格；大屏还原 <li>避免用 <code>transform: scale()缩放整表——会导致点击区域偏移、字体模糊、键盘遮挡输入框 - 放弃原生
<thead> 固定方案，改用双层结构：<code><div class="table-header"> 单独渲染表头，<code><div class="table-body"> 包裹 <code><table> 并设 <code>display: inline-block，监听scrollLeft同步偏移（轻量够用） - 若必须语义化且列数少（≤ 4），可接受妥协：放弃横向滚动，改用
max-height: 400px+overflow-y: auto，保证表头始终可见 - 用
display: grid模拟表格时，grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)))是安全起点，minmax()下限别设过低（ 复杂点不在“怎么写”，而在“什么时候该停”：当调试超过 20 分钟还没让 iOS Safari 滚动跟手，说明已到原生<table> 的能力边界，该切卡片或 Grid 了。</table>
table-layout: fixed 配合什么才真正生效
table-layout: fixed 不是万能开关，它只按第一行或 <col> 定义分配列宽，后续长文本（如 URL、JSON 字段）会溢出或截断，根本撑不开横向滚动空间。
小屏下彻底放弃表格结构更可靠
当列数 ≥ 5 或含大量长文本字段时，横向滚动体验已接近临界点。此时卡片式布局不是妥协，而是更符合移动端交互直觉的选择。
