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