::before 在 上不生效是因为 默认为 display: table-cell 的替换元素，不支持伪元素；必须改为 block 或 inline-block 才能使用 attr(data-label) 配合媒体查询实现响应式表头标签。

直接在 <td> 上写 <code>::before { content: "订单号" } 是无效的——<td> 默认是 <code>display: table-cell，不支持伪元素生成内容。真正能用的方案，是给每个 <td> 加 <code>data-label 属性，再配合媒体查询切换显示模式。

为什么 ::before 在 <td> 上不生效 <p>这不是浏览器 bug，而是规范行为：<code><td> 是替换元素（replaced element），且默认 <code>display: table-cell，CSS 伪元素在多数现代浏览器中会被忽略。强行加 ::before 不会渲染，也不报错，只默默失效。

• 必须先让 <td> 变成支持伪元素的 display 类型，比如 <code>display: block 或 display: inline-block
• position: relative 不是必须，但加了更稳妥，尤其当你要用 position: absolute 定位伪元素时
• attr(data-label) 只读取属性值，不处理空格或换行；data-label="下单时间" 就原样输出“下单时间”，不能写成 data-label="下单\时间"（反斜杠无效）

怎么给每个 <td> 正确添加 <code>data-label

关键不是“加属性”，而是确保它和对应 <th> 文本完全一致（包括空格、标点、大小写），否则屏幕阅读器读出来就错位了。 <ul><li>手动写：直接在 HTML 里补，比如 <code><td data-label="收货人电话">138****1234 <li>JS 批量注入（适合动态表格）：<pre class="brush:php;toolbar:false;">document.querySelectorAll('tr').forEach(row =&gt; { const headers = row.closest('table').querySelectorAll('th'); row.querySelectorAll('td').forEach((td, i) =&gt; { if (headers[i]) td.dataset.label = headers[i].textContent.trim(); }); });</pre> </li> <li>避免缩写：<code>data-label="状态" ✅，data-label="Stat" ❌（辅助技术不可读）

窄屏下用 ::before + attr(data-label) 渲染标签

媒体查询内要同时改结构和样式，缺一不可。只改 content 不改 display，伪元素依然不会出现。


Article To Html
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
下载
• 必须把 table、thead、tbody、tr、td 全部设为 display: block（th 同理，但实际窄屏下通常隐藏）
• td::before 建议加 white-space: nowrap 防止标签被折行，再配 text-overflow: ellipsis 和固定宽度可防溢出
• 如果想左对齐标签文字，别用 text-align: left（td 是块级后默认左对齐），而用 display: inline-block + width 控制标签区域
• 示例 CSS 片段：

  @media (max-width: 480px) {
    .responsive-table thead { display: none; }
    .responsive-table tr { display: block; margin-bottom: 12px; }
    .responsive-table td {
      display: block;
      position: relative;
      padding-left: 100px;
    }
    .responsive-table td::before {
      content: attr(data-label) ": ";
      position: absolute;
      left: 0;
      width: 90px;
      font-weight: bold;
      white-space: nowrap;
    }
  }

容易被忽略的兼容性与语义细节

这套方案看似简单，但三个地方一漏就全崩：一是 table-layout: fixed 没配（宽屏列宽失控），二是 data-label 值和 <th> 不严格一致（无障碍失效），三是没给 <code>td 设 margin-bottom 或 border-bottom（堆叠后行与行粘连难分）。

Outlook 邮件客户端完全不支持 table-layout: fixed，如果表格要进邮件，得另起一套方案；而所有主流移动端浏览器（iOS Safari、Chrome Android）都支持 attr() + display: block 组合，放心用。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！