直接加 overflow-x: auto 无效，因 table 是独立格式化上下文且默认撑宽父容器；必须用设 width 和 overflow-x: auto 的外层 div 包裹，并配 table-layout: fixed、white-space: nowrap 及 -webkit-overflow-scrolling: touch（iOS）。
直接加 overflow-x: auto 往往没用——浏览器根本没识别出“溢出”，表格还是撑满全屏，滚动条压根不出现。真正要起效，得先让表格“暴露宽度”，再给它一个可滚动的容器。
为什么 overflow-x: auto 加了却没滚动条
表格默认是 display: table，td 和 th 会按内容自动撑宽列，哪怕父容器只有 320px，整个表格也被当成一个不可分割的“大块”渲染，overflow-x 失去作用对象。
- 必须打断默认行为：
table-layout: fixed是关键，它让列宽由第一行（或<col>）决定，不再被内容顶开 -
overflow-x: auto必须作用在**外层包裹容器**上，比如<div class="table-container">，不能直接加在 <code><table> 上 <li>外层容器要有明确宽度限制（如 <code>width: 100%或max-width: 800px），否则滚动条不会触发 - 如果用了 Bootstrap 等框架，检查是否被
width: 100%覆盖了table-layout: fixed的效果，需手动重置 - 必须加
-webkit-overflow-scrolling: touch到外层容器（如.table-container），仅对overflow-x: auto或scroll生效 - 避免全局加这个属性，只用于真正需要横向滚动的容器，否则有内存泄漏风险
- 别指望用户凭直觉发现“可滑动”，小屏下建议配合视觉提示（如右端阴影、箭头图标）或降级为卡片布局
-
min-width: 600px加在<table> 上，防止内容被压缩过窄导致文字挤成一团 <h3>为什么用 <code>data-label+::before比纯滚动更可靠横向滚动只是“能看”，不是“好读”：表头和数据脱节、长字段被截断、屏幕阅读器无法关联语义。真正的窄屏适配，是把每行转成带标签的垂直卡片。
立即学习“前端免费学习笔记（深入）”；
- 每个
<td> 必须有 <code>data-label属性，值用业务明确术语（如data-label="邮箱"），不能只写在<th> 里 <li>窄屏媒体查询中，设 <code>tr { display: block }、td { display: block; position: relative }，再用td::before { content: attr(data-label); position: absolute; left: 0; width: 40%; } -
thead必须设display: none或position: absolute; top: -9999px，否则它还在 DOM 中占位，干扰td垂直堆叠 - 大屏恢复时，必须同步重置整条链：
tr { display: table-row }、td, th { display: table-cell }，漏掉任意一层都会失效
最易被忽略的是：表格结构在窄屏下不是“隐藏列”，而是“重构呈现”。
data-label不是锦上添花，是语义锚点；table-layout: fixed不是可选项，是宽度可控的前提；而-webkit-overflow-scrolling: touch在 iOS 15 及以下仍是刚需，不是兼容性补丁。 - 每个
如何让窄屏下表格真正可滚动且体验可用
iOS Safari 对横向滚动特别敏感：手指一抬就停、没惯性、滚动条默认隐藏——用户根本不知道要滑。
