用data-label+伪元素将表格转为语义化卡片：为每个td添加对应th文本的data-label属性，小屏下隐藏thead，用td:before显示标签，tr设margin-bottom或border-bottom分隔，纯css方案比js更稳定、无障碍支持更好。
表格怎么用 media query 转成卡片？关键在结构语义保留
直接给 <table> 加 <code>display: block 没用——浏览器会忽略大部分表格样式，且屏幕阅读器无法识别语义。必须靠 data-label 把列名“带下去”，再用伪元素重建结构。
- 每行
<tr> 保持原样，但为每个 <code><td> 添加 <code>data-label属性，值等于对应<th> 的文本（比如 <code><td data-label="用户名">张三</td>） - 小屏下隐藏原始
<thead> 和 <code><th>，用 <code>tr:before显示行序号或标题（可选），用td:before插入content: attr(data-label) ": " -
td设为display: block、width: 100%，并清除float和border-collapse影响 - 伪元素不破坏原始 HTML 结构，
role="row"和role="cell"可继续保留，供辅助技术读取 - 避免 JS 加载失败导致移动端仍显示错乱表格（常见于弱网或禁用 JS 场景）
- 性能开销极低：无重排、无事件监听、无 DOM 操作
- 检查是否所有
<td> 都有 <code>data-label，尤其注意合并单元格（colspan）场景——它不需要data-label，但相邻单元格仍需补全 - 不要用 JavaScript 自动生成
data-label，容易因 DOM 加载顺序出错；建议手写或模板引擎渲染时注入 - 如果列名动态变化（如多语言），需确保后端或构建时同步更新
data-label值 - 给
tr加margin-bottom: 1.2em，比单纯用padding更易控制行间呼吸感 - 用
border-bottom: 1px solid #eee替代margin实现轻量分隔线，避免空白区域过大 -
td:before后加white-space: nowrap防止标签换行，td内容用word-break: break-word处理长文本
为什么伪元素方案比 JS 动态重写更稳妥？
JS 方案要操作 DOM、监听 window.resize、还要处理 SSR 渲染问题；而纯 CSS 媒体查询只依赖 min-width，服务端直出即生效，无障碍支持也更好。
容易踩的坑：data-label 写错或漏写会导致卡片字段丢失
data-label 必须和表头一一对应，且不能含空格或特殊字符（如 data-label="订单 ID" 应写成 data-label="订单ID" 或 data-label="order_id"），否则 attr() 取不到值，卡片里就只剩内容没标签。
移动端卡片间距和对齐怎么调才自然？
堆叠后默认上下紧贴，看起来像段落而非卡片，需要手动加间隔和视觉分隔。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
