直接给加overflow-x:auto无效，必须用外层容器滚动或窄屏卡片布局；表格是独立格式化上下文，默认撑满父宽且不响应overflow，需将该样式加在设了宽度限制的外层div上，并配min-width:100%等确保内容不压缩。
直接给 <table> 加 <code>overflow-x: auto 无效，必须用外层容器滚动或窄屏卡片布局——选错方案，小屏用户根本看不到关键字段。
为什么 overflow-x: auto 加在 <table> 上不生效
<p>表格是独立格式化上下文，默认撑满父容器宽度，<code>overflow 属性对它不起作用。浏览器没识别出“内容溢出”，滚动条压根不会出现。
-
overflow-x: auto 必须加在外层 <div class="table-container"> 上
<li>外层容器需设明确宽度限制，比如 <code>width: 100% 或 max-width: 800px
<table> 自身要设 <code>min-width: 100% 或 width: max-content，否则内容被压缩变形
- 别漏掉
-webkit-overflow-scrolling: touch，否则 iOS 滑动卡顿、没惯性、滚动条默认隐藏
用 data-label + ::before 实现窄屏卡片布局
这不是视觉“美化”，而是语义重构：把每行变成带字段名的垂直卡片，解决表头与数据脱节、长文本截断、无障碍缺失等问题。
- 每个
<td> 都得手动加 <code>data-label，值必须和对应 <th> 文本完全一致（包括空格、标点），例如 <code><th>最后登录时间</th> → <td data-label="最后登录时间">2026-07-06</td>
- 媒体查询中设
tr { display: block }、td { display: block; position: relative }，再用 td::before { content: attr(data-label) ": "; position: absolute; left: 0; width: 40%; }
<thead> 不能用 <code>display: none，得用 position: absolute; top: -9999px 视觉隐藏，否则屏幕阅读器读不到表头
- 如果
<td> 内容多行，<code>::before 只出现在第一行左上角——此时应改用 display: flex 或 float: left 结构，避免标签飘移
横向滚动方案里最容易被忽略的交互细节
用户根本不知道能滑——不是写了 overflow-x: auto 就完事了。
- Bootstrap 等框架常给
<table> 注入 <code>width: 100%，会覆盖 table-layout: fixed 效果，需显式重置
-
white-space: nowrap 要加在 <td> 上而非 <code><table>，否则中文换行失效，英文单词被强行折断
<li>卡片模式下，<code>td::before 的 position: absolute 前提是 td 本身设了 position: relative，否则定位基准错乱
- 必须加底部阴影、右端箭头图标，或在首次进入时用 JS 触发一次轻微滚动提示——否则 80% 的用户不会主动左右滑动
真正难的不是写几行 CSS，而是决定“哪些字段在小屏必须保留”——卡片空间有限，写错一个 data-label，用户就看不懂整行数据。
overflow-x: auto 必须加在外层 <div class="table-container"> 上
<li>外层容器需设明确宽度限制，比如 <code>width: 100% 或 max-width: 800px
<table> 自身要设 <code>min-width: 100% 或 width: max-content，否则内容被压缩变形
-webkit-overflow-scrolling: touch，否则 iOS 滑动卡顿、没惯性、滚动条默认隐藏用 data-label + ::before 实现窄屏卡片布局
这不是视觉“美化”，而是语义重构：把每行变成带字段名的垂直卡片，解决表头与数据脱节、长文本截断、无障碍缺失等问题。
- 每个
<td> 都得手动加 <code>data-label，值必须和对应<th> 文本完全一致（包括空格、标点），例如 <code><th>最后登录时间</th>→<td data-label="最后登录时间">2026-07-06</td> - 媒体查询中设
tr { display: block }、td { display: block; position: relative }，再用td::before { content: attr(data-label) ": "; position: absolute; left: 0; width: 40%; } <thead> 不能用 <code>display: none，得用position: absolute; top: -9999px视觉隐藏，否则屏幕阅读器读不到表头- 如果
<td> 内容多行，<code>::before只出现在第一行左上角——此时应改用display: flex或float: left结构，避免标签飘移横向滚动方案里最容易被忽略的交互细节
用户根本不知道能滑——不是写了
overflow-x: auto就完事了。- Bootstrap 等框架常给
<table> 注入 <code>width: 100%，会覆盖table-layout: fixed效果，需显式重置 -
white-space: nowrap要加在<td> 上而非 <code><table>，否则中文换行失效，英文单词被强行折断 <li>卡片模式下，<code>td::before的position: absolute前提是td本身设了position: relative，否则定位基准错乱 - 必须加底部阴影、右端箭头图标，或在首次进入时用 JS 触发一次轻微滚动提示——否则 80% 的用户不会主动左右滑动
真正难的不是写几行 CSS，而是决定“哪些字段在小屏必须保留”——卡片空间有限，写错一个
data-label，用户就看不懂整行数据。 - Bootstrap 等框架常给
