真正能落地的解法是用 data-label + ::before + attr() 在窄屏下将表格转为带标签的垂直列表；需为每个 td 添加 data-label 属性，配合媒体查询使 tr、td 变块级并垂直堆叠，用伪元素渲染语义化标签，同时兼顾无障碍与兼容性。
直接给表格加 overflow-x: auto 往往治标不治本——小屏下用户根本不知道要滑动，表头和数据脱节，长字段被截断又没提示。真正能落地的解法是：用 data-label + ::before + attr() 在窄屏下把每行转成带标签的垂直列表，语义保留、无障碍友好、纯 CSS 驱动。
为什么不能只靠横向滚动
横向滚动在 iPhone SE 或 Android 小屏上极易失效：iOS Safari 默认隐藏滚动条，overflow-x: auto 对原生 <table> 元素本身无效，必须包裹 <code><div class="table-wrapper"> 并设 <code>display: block；但即便如此，用户仍需凭经验发现“可滑动”，且滑动后表头（<th>）与对应单元格（<code><td>）视觉分离，关键信息无法对齐。这不是交互问题，是信息结构断裂。
<h3>给每个 <code><td> 添加 <code>data-label 属性
这是重构的基础——把列语义“存”进单元格自身，后续才能用伪元素读取。不需要改后端模板逻辑，前端 JS 注入或手写都可行：
<tr> <td data-label="姓名">张三</td> <td data-label="邮箱">zhangsan@example.com</td> <td data-label="状态">已激活</td> </tr>
- 必须为每个
<td> 单独设置，<code><th> 不参与伪元素渲染 <li>值建议用中文或业务明确术语，避免缩写（如不用 <code>"Stat"而用"状态"），保障屏幕阅读器可读 - 如果列数多、手动补麻烦，可用 JS 批量注入：
document.querySelectorAll('tr').forEach(row => { row.querySelectorAll('td').forEach((td, i) => td.dataset.label = row.querySelector('th:nth-child(' + (i+1) + ')').textContent }); - 不要给
::before设width或float，会破坏流式布局；用white-space: nowrap保标签不折行即可 - 如果某列内容极长（如日志文本），可在该
<td> 上额外加 <code>word-break: break-word，不影响其他列容易被忽略的兼容性与可访问性细节
这套方案在 Chrome/Firefox/Edge 上表现稳定，但在 iOS Safari 15.6 之前版本中，
attr()对空格或特殊字符支持弱；同时，纯视觉重构后，屏幕阅读器默认仍按原始表格结构朗读，需补一层语义锚点：- 移除原
<thead> 的 <code>display: none，改用aria-hidden="true"，避免阅读器跳过整段表头 - 为每个
<td> 加 <code>role="cell"，并在其父<tr> 上加 <code>role="row"，维持 ARIA 表格角色链 - iOS Safari 中若伪元素文字模糊，加
-webkit-font-smoothing: antialiased;到::before - 不要用
visibility: hidden隐藏原<th>，它会导致部分安卓 TalkBack 版本跳过后续内容 <p>最复杂的不是写对 CSS，而是让 <code>data-label的值始终与表头文案一致——一旦后端改了列名，前端忘记同步，用户看到的就是错位标签。上线前务必用真实数据跑一遍断点检查。
- 移除原
用 ::before + attr(data-label) 渲染表头标签
媒体查询触发后，让 <tr> 变块级，<code><td> 垂直堆叠，并在每个单元格前插入带语义的标签：<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<pre class='brush:php;toolbar:false;'>@media (max-width: 480px) {
.responsive-table {
display: block;
}
.responsive-table thead,
.responsive-table tbody {
display: block;
}
.responsive-table tr {
display: block;
border-bottom: 1px solid #eee;
margin-bottom: 12px;
}
.responsive-table td {
display: block;
text-align: right;
padding: 6px 0;
}
.responsive-table td::before {
content: attr(data-label) ": ";
font-weight: bold;
white-space: nowrap;
}
}</pre>
<ul><li>
<code>display: block 必须作用于 <tr> 和 <code><td>，否则伪元素无法定位到正确上下文
<li>
<code>text-align: right 让冒号对齐，提升扫描效率；若内容含数字或时间，可改用 text-align: left 避免右对齐导致的视觉错位
