直接用 display: block 会让表格“散架”，因为 table、tr、td 的默认 table-box 盒模型被破坏，td 垂直堆叠、丢失语义对齐；attr(data-label) 需手动在每个 td 上绑定与 th 文本严格一致的 data-label 值，CSS 通过 ::before{content:attr(data-label)} 显示；移动端用 absolute 定位易溢出或错位，应确保父级 td 为 position:relative 并处理换行截断；隐藏 thead 应用视觉隐藏（如 position:absolute;top:-9999px）而非 display:none，以保障无障碍；该方案仅为 CSS 视觉重构，HTML 表格结构未变，打印、导出、爬虫仍按表格解析。
为什么直接用 display: block 会让表格“散架”
因为 table、tr、td 是语义化标签，浏览器对它们有默认的盒模型（table-box），强行设 display: block 后，td 不再继承列对齐逻辑，所有单元格会垂直堆叠、失去与表头的语义关联——你看到的是一堆没标签的纯文本，根本不知道哪条是“用户名”，哪条是“创建时间”。
attr(data-label) 怎么让每个 td 带上自己的“名字”
关键在 HTML 层必须提前写好 data-label 属性，它不是自动提取 th 文本的魔法，而是手动绑定的映射关系。CSS 里的 ::before { content: attr(data-label); } 只是把那个属性值拿出来显示。
-
data-label必须加在每个td上，不能只加在th或靠 JS 注入 - 值要和原始表头文字一致（大小写、空格、符号都需匹配），比如
Last Login 2026-05-08 - 如果表头用了
scope="col"或aria-label，attr()无法读取，它只认自定义data-属性
移动端卡片布局里 position: absolute 的坑
常见写法是给 td::before 设 position: absolute，再用 left/top 定位标签，但这容易导致：
- 标签文字过长时溢出容器，不换行也不截断——得额外加
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; - 父级
td没设position: relative，绝对定位会相对于最近的定位祖先（可能是 body），导致标签飘到屏幕外 - 多行文本的
td中，::before只出现在第一行左上角，下面几行没标签——此时应改用float: left或display: flex结构
隐藏 thead 但别真删掉它
display: none 会让屏幕阅读器完全忽略表头，对无障碍访问是致命伤。正确做法是视觉隐藏但保留语义：
- 用
position: absolute; top: -9999px;移走thead，而不是display: none - 确保每个
td的data-label和原th内容严格对应，这是替代性可访问性的唯一依据 - 如果表格支持排序或筛选，JS 操作仍需依赖原始
th的位置索引，data-label不能替代 DOM 结构
最易被忽略的一点：这种方案本质是「视觉重构」，不是「结构转换」。HTML 还是表格，只是 CSS 把它画成了卡片。这意味着打印样式、导出 Excel、甚至某些爬虫仍按表格解析——如果你需要真正改变数据结构，就得用 JS 重写 DOM，而不是只靠 CSS。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
