data-label必须手动写在每个td里，不能靠js或css补全，因其仅读取自身属性值，需与th文本完全一致以保障窄屏可读性和模板一致性。
data-label 必须手动写在每个 td 里，不能靠 JS 或 CSS 补全
很多人误以为可以用 JS 扫描 th 文本自动注入 data-label，或者指望 CSS 的 ::before 能“读取上方 th”——这做不到。attr(data-label) 只能读当前元素自身的属性值，浏览器不会跨节点查找。SSR 页面、静态 HTML、甚至禁用 JS 的环境都得正常工作，所以必须硬编码。
常见错误现象：
– 某列 td 漏写 data-label，窄屏下该字段直接无标签
– data-label="状态" 和对应 th 写的是 订单状态，语义错位，辅助技术读出来就乱
– 用模板引擎时从列配置动态拼接，但大小写/空格不一致（比如 "status" vs "状态"）
-
data-label值应与th文本完全一致（包括标点、空格、中英文），建议复制粘贴而非手打 - 值要简短，移动端显示空间有限，“状态”比“当前订单处理状态”更可靠
- 如果列用了
colspan或rowspan，每个参与合并的td都得单独设data-label，不能只写一个 - Vue/React 中别在
render()或v-for里用index查找列名——列顺序可能变，应绑定到字段 key 或显式传入 label
为什么 data-label 不能放在 tr 或 tbody 上
因为 ::before 伪元素只能作用于当前元素，且 content: attr(data-label) 会读取它所在节点的属性。把 data-label 放在 tr 上，所有 td 的伪元素都会显示同一个值；放在 tbody 更糟——压根没用。
使用场景很明确：每条记录（tr）里的每个字段（td）都需要独立标注，否则堆叠后无法区分哪段文字对应哪个字段。
- 错误写法：
<tr data-label="订单"> <td>ORD-2026-789</td> <td>李四</td> </tr> - 正确写法：
<td data-label="订单号">ORD-2026-789</td> <td data-label="客户">李四</td> - 即使两列内容相同（如“创建人”和“修改人”），
data-label也必须不同，否则用户无法分辨
data-label 与可访问性（a11y）的关系容易被忽略
仅靠 data-label + ::before 不等于可访问。屏幕阅读器默认不读 data- 属性，也不会触发 ::before 的内容。真正起作用的是 DOM 结构本身是否保留了表头关联。
这意味着：
– thead 不能简单用 display: none 隐藏，否则读屏器直接跳过整张表的列定义
– 必须配合 scope 或 aria-labelledby 显式绑定 td 和 th，哪怕窄屏下视觉上不显示 thead
- 推荐做法：保留
thead在 DOM 中，用visibility: hidden+position: absolute移出视口，而非display: none - 给每个
td加headers属性，指向对应th的id，例如<th id="status">状态</th>→<td headers="status">已发货</td> -
data-label是视觉降级方案，不是 a11y 替代品；两者要并存，不是二选一
模板渲染时怎么避免 data-label 同步出错
用 Vue/React 渲染表格时，最容易踩的坑是列配置数组和实际 td 渲染顺序不一致。比如后端返回字段顺序是 ["name", "age", "city"]，但前端模板里写了 v-for="(col, i) in columns" 却没校验 i 是否对得上当前 td 的字段。
性能影响不大，但一旦错位，用户在手机上看到的就是“年龄：北京”“城市：28”这种混乱信息。
- 不要依赖循环索引推导
data-label，应让每列数据自带label字段：{ key: "status", label: "状态", width: "120px" } - React 中用
map((col, idx) => <td key="{idx}" data-label="{col.label}">...</td>) - Vue 中避免
v-for="(item, index) in row"这种写法，改用v-for="col in columns"，再从row[col.key]取值 - 上线前用 Puppeteer 或 axe-core 扫描，检查所有
td[data-label]是否非空且唯一
data-label，而是保证它和结构、语义、模板逻辑三者始终对齐——漏掉任意一环，窄屏下就会出现“看得见但看不懂”的表格。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
