真正有效的方案是用媒体查询将表格打散为块级卡片结构，通过data-label注入表头信息；thead需设display:none或绝对定位隐藏，td需position:relative配合::before绝对定位显示标签，大屏恢复时须同步重置tr、td、th及tbody的display值。
media query 里怎么让 tr 变成块级元素
直接给 tr 设 display: block 是第一步，但光这样不行——tr 的子元素 td 和 th 仍受表格渲染模型约束，会继续按行内盒行为表现。必须连带重置所有表格相关 display 值。
关键操作是：在小屏媒体查询中，把整套表格语义结构“降级”为普通流式布局：
-
table、thead、tbody、tfoot全部设为display: block -
tr设为display: block，并加margin-bottom: 1rem划分数据区块 -
td和th设为display: block，再用position: relative配合伪元素注入标签 - 务必移除所有
border-collapse、table-layout相关声明，它们会干扰块级渲染
为什么必须用 data-label 而不是 th 文本
因为 th 在 display: block 后不会自动跟对应 td 绑定关系，且移动端每行独立渲染，原始表头已失去上下文。硬写死 th 内容会导致重复或错位。
data-label 是显式绑定字段名的轻量方案，每个 td 自带元信息，方便伪元素精准调用：
<tr> <td data-label="姓名">张三</td> <td data-label="城市">北京</td> </tr>
对应 CSS 中用 td:before { content: attr(data-label) ": "; } 即可动态生成键值对。漏掉 data-label 或拼写错误，就会显示空冒号或 attr() 回退为空字符串。
td:before 和 tr:before 哪个该用
只用 td:before，不用 tr:before。前者能逐单元格控制字段名，后者会在整行开头加一次标签，无法匹配多列数据。
常见错误是误以为 tr:before 可以统一打头，结果所有 td 前都堆叠同一段文字。正确做法是：
- 每个
td独立触发:before，靠attr(data-label)拿自己字段名 -
td设width: 100%+text-align: left，确保内容左对齐不溢出 - 若需视觉分隔，用
border-bottom加在td上，而不是tr
注意：iOS Safari 对 :before 在 display: block 表格单元格中的支持曾有延迟渲染问题（2025 年底已修复），但旧版 WebView 仍可能跳过伪元素，建议加兜底文案或 JS 补充。
卡片间距和文字折行容易失控
卡片模式下，td 变成垂直堆叠块，但图片、长文本、按钮等子元素若没约束，会撑破卡片宽度或导致高度爆炸。
必须手动收束内部尺寸：
- 图片统一加
width: 100%; height: auto; object-fit: cover;，父td设overflow: hidden - 标题类文本用
display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2;截两行，比text-overflow: ellipsis更稳 - 避免在
td里用position: absolute放徽标或操作按钮——它会脱离文档流，导致卡片高度计算失效 - 字体大小别依赖
em或rem动态缩放，小屏下易过小，建议用px或vw锚定
最常被忽略的是 td 的 min-height —— 某些空单元格或纯图标行会塌陷，破坏卡片齐整感，加个 min-height: 1.5rem 就能稳住底线。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
