直接给<table>加overflow-x:auto无效，必须用外层容器滚动或窄屏卡片布局；前者需容器设宽、table设min-width，后者用data-label+::before重构语义并兼顾无障碍。
直接加 overflow-x: auto 到 <table> 上基本没用——浏览器不认为它“溢出”，滚动条压根不会出现。真正起效的方案只有两个：外层容器滚动，或窄屏下转卡片布局。选哪个，取决于数据量、列重要性、以及是否要兼顾屏幕阅读器。
为什么 overflow-x: auto 加在 <table> 上无效
表格是独立格式化上下文，默认撑满父容器宽度，overflow 属性对它不起作用。浏览器根本没识别出“内容超出了”，自然不触发滚动机制。
-
overflow-x: auto必须加在外层<div class="table-container">上，不能直接写在<table> - 外层容器必须有明确宽度限制，比如
width: 100%或max-width: 800px -
<table>自身要设min-width: 100%或width: max-content，否则内容会被压缩变形 - 别漏掉
-webkit-overflow-scrolling: touch，否则 iOS 滑动卡顿、没惯性、滚动条默认隐藏
如何用 data-label + ::before 实现窄屏卡片布局
这不是视觉“美化”，而是语义重构：把每行变成带字段名的垂直卡片，解决表头与数据脱节、长文本截断、无障碍缺失等问题。
- 每个
<td>都得手动加data-label，值必须和对应<th>文本完全一致（包括空格、标点），例如<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>不能用display: none，得用position: absolute; top: -9999px视觉隐藏，否则屏幕阅读器读不到表头 - 如果
<td>内容多行，::before只出现在第一行左上角——此时应改用display: flex或float: left结构，避免标签飘移
哪些地方最容易被忽略
不是“写了就生效”，而是几个细节一错，整个方案就崩：
立即学习“前端免费学习笔记（深入）”；
- Bootstrap 等框架常给
<table>注入width: 100%，会覆盖table-layout: fixed的效果，需显式重置 -
white-space: nowrap要加在<td>上而非<table>，否则中文换行失效，英文单词被强行折断 - 卡片模式下，
td::before的position: absolute前提是td本身设了position: relative，否则定位基准错乱 - 横向滚动方案里，用户根本不知道能滑——必须加底部阴影、右端箭头图标，或在首次进入时用 JS 触发一次轻微滚动提示
