::before注入表头失效主因有三：td未设position: relative导致定位错乱；data-label属性缺失或命名不规范；媒体查询未生效。需手动为每个td添加data-label，配合absolute定位与可访问性处理确保语义完整。
为什么直接用 ::before 注入表头会失效
常见错误是给 td 写 ::before { content: attr(data-label); } 却没显示内容，原因有三：一是 td 没设 position: relative，导致 ::before 脱离文档流后定位错乱；二是 data-label 属性根本没写在 HTML 里；三是媒体查询未生效，样式压根没加载。尤其容易忽略的是：伪元素默认是 inline 级，若 td 是 display: block 但没设 min-height 或 line-height，文字可能被裁掉。
data-label 必须手动写进每个 td，不能靠 JS 自动生成
浏览器不解析 th 文本并自动映射到对应 td，必须显式声明。比如：
<tr> <td data-label="姓名">张三</td> <td data-label="城市">北京</td> <td data-label="状态">启用</td> </tr>
遗漏任意一个 data-label，对应单元格在小屏下就会丢失语义。注意：data-label 值建议用中文或短英文，避免空格/特殊字符，否则 attr() 可能解析失败；也不要用驼峰或下划线（如 data-userName），部分旧版 Safari 对非标准命名支持不稳定。
移动端 ::before 标签与数据的排版对齐很关键
单纯左对齐标签、右对齐数据，视觉上容易割裂。推荐用 position: absolute + padding-left 组合：
立即学习“前端免费学习笔记（深入）”；
-
td设position: relative; padding-left: 80px; -
td::before设position: absolute; left: 6px; top: 50%; transform: translateY(-50%); - 加
white-space: nowrap;防止标签换行挤压数据
这样标签始终垂直居中、紧贴左侧，数据区域留足空间，不会因字体大小或内容长度变化而错位。若用 float: left，在某些安卓 WebView 中会触发重绘异常，导致标签偶尔消失。
隐藏 thead 后，可访问性不能丢
屏幕阅读器仍需知道表格结构。仅用 display: none 隐藏 thead 会让辅助技术跳过所有表头信息。正确做法是：
- 保留
thead的 DOM 结构 - 用
visibility: hidden; position: absolute; clip: rect(1px, 1px, 1px, 1px);隐藏视觉但保留语义 - 给每个
td补role="cell"，必要时加aria-labelledby指向对应thID
否则，视障用户听到的只是“张三”“北京”“启用”，完全不知道它们分别代表什么字段——这比横向滚动更损害可用性。
