伪元素 ::before 无法在 td 上显示内容，因 td 是替换元素且默认 display: table-cell，不支持生成内容；应改用 data-label + ::before 在小屏下实现标题显示。
伪元素 ::before 无法在 <td> 上显示内容？<p>因为 <code><td> 是替换元素（replaced element），且默认 <code>display: table-cell，不支持生成内容（::before/::after 在部分浏览器中会被忽略）。这不是 bug，是规范行为。
实操建议：
- 改用
<div> 或 <code><span></span>包裹单元格内容，再对这些容器应用伪元素 - 确保目标元素有
position: relative（伪元素常需定位）和非content: none - 避免对
<th> 或 <code><td> 直接写 <code>::before { content: "xxx" }—— Chrome 和 Safari 下大概率不渲染用
data-*属性 +::before实现手机端标题显示核心思路：把表头文字存进
data-label，在小屏下用伪元素把该值“搬”到单元格前。这绕开了表格元素限制，也无需 JS。示例结构：
立即学习“前端免费学习笔记（深入）”；
<td data-label="用户名">张三</td>
CSS（仅在小屏生效）：
@media (max-width: 768px) { table, thead, tbody, th, td, tr { display: block; } td { position: relative; } td::before { content: attr(data-label) ": "; font-weight: bold; color: #555; } }注意点：
-
attr(data-label)只读取属性值，不支持表达式或空格转义，所以data-label="订单 ID"会原样输出，含空格 - 必须配合
display: block（或flex）让td支持伪元素布局，否则仍可能失效 - 若表格有多列，
::before会重复出现，需用:nth-child()精确控制
响应式表格中
display: table-cell和block切换的兼容性坑直接给
td设display: block后，部分安卓 WebView（尤其旧版 UC、QQ 浏览器）会丢失边框、内边距或文本对齐，不是所有 CSS 属性都继承良好。稳妥做法：
- 用
display: flex替代block，更可控，且支持align-items垂直居中 - 重置
border、padding、text-align，不要依赖表格默认样式 - 避免在
@media中只改display，顺手加上width: 100%和box-sizing: border-box
为什么不用 JS 动态插入标题？
纯 CSS 方案能规避 DOM 操作延迟、首屏闪动、SSR 不一致等问题。但前提是数据结构允许加
data-label。如果后端无法注入
data-属性（比如 CMS 输出固定 HTML），就得退回到 JS 方案：- 用
document.querySelectorAll('thead th')提取表头文本 - 遍历
tbody td:nth-child(n)，动态插入span标签而非依赖伪元素 - 务必监听
resize并防抖，否则频繁触发影响滚动性能
伪元素方案简洁，但前提是结构可控；JS 方案灵活，代价是多一层维护和潜在的水合 mismatch。真正在意首屏体验和 SEO 的项目，优先走 CSS 路径。
-
