content:attr(data-title)在表格中常失效，因td/th默认display:table-cell，其伪元素不渲染内容，须显式设display:block/inline-block；data-title需非空且正确设置，配合@media控制小屏提示显示，并注意可访问性与兼容性问题。
为什么 content:attr(data-title) 在表格里常失效
直接在 <td> 或 <th> 上写 ::before { content: attr(data-title); } 不会显示，因为 content 属性只对伪元素生效，且该伪元素必须是**可生成内容的元素**（比如 display: inline 或 block），而 <td> 默认是 table-cell，其伪元素不渲染内容。常见现象是样式写了但什么也不出现，连开发者工具里都看不到伪元素节点。
- 必须显式设置
display: block或inline-block才能让::before生效 -
data-title属性值必须存在且非空，空字符串或缺失会导致attr()返回空 - 不要用
visibility: hidden或opacity: 0隐藏原表头——这会让屏幕阅读器也跳过，影响可访问性
如何让 data-title 在小屏下作为表头提示显示
典型做法是：小屏时隐藏原表头文字，用伪元素把 data-title 提到单元格上方或左侧；大屏恢复原结构。关键是控制显示逻辑和定位。
- 给
<td>和<th>添加data-title属性，例如：<td data-title="用户名">alice</td> - 小屏 CSS 中，对
td, th设置position: relative，再用::before绝对定位显示提示 - 务必加
display: block（或inline-block）到伪元素上，否则不渲染 - 示例片段：
@media (max-width: 768px) { td, th { position: relative; } td::before, th::before { content: attr(data-title) "："; display: block; font-size: 0.8em; color: #666; margin-bottom: 0.2em; } }
data-title 值怎么填才不容易出错
属性值要简洁、无换行、避免双引号嵌套。如果从后端模板或 JS 动态生成，需注意转义和空格处理。
- 推荐纯文本，如
data-title="订单号"，不要写data-title="「订单号」"这类带标点的冗余形式 - 若字段名含空格（如 "创建时间"），直接保留，CSS
attr()能正确读取 - JS 动态设置时，用
el.setAttribute('data-title', str)，别用el.dataset.title = str——后者会自动转为 kebab-case，attr(data-title)就读不到 - 服务端渲染时，确保 HTML 输出中该属性存在，可用浏览器“查看页面源代码”确认，而不是只看 DevTools 的实时 DOM
移动端点击区域与可访问性隐患
单纯靠 ::before 显示提示，不会增加点击热区，也不能被键盘聚焦或被屏幕阅读器朗读。这不是真正的“表头提示”，只是视觉辅助。
立即学习“前端免费学习笔记（深入）”；
- 如果用户需要操作（比如点击排序），必须保留原
<th>的功能，不能只靠伪元素替代 - 想支持键盘导航，得配合
aria-label或aria-labelledby，例如：<td aria-label="用户名：alice">alice</td> - 伪元素内容无法被复制、搜索、翻译，所以关键信息仍应保留在 DOM 文本中（比如用
sr-only类隐藏而非删除） - 安卓微信 WebView 对
attr()支持不稳定，测试时务必真机检查，必要时降级为 JS 注入提示文案
data-title + ::before 是轻量解法，但它的作用仅限于视觉提示；一旦涉及交互、SEO 或无障碍，就得补上语义化标记和 JS fallback。 
