卡片化表格需将tr、td、thead设为display:block/none，保留table语义；必用data-label+::before显示列名；断点依内容断裂点定，推荐min-width递进；卡片内部须约束图片、标题及定位元素。
table 布局转卡片必须改 display 属性
直接给 tr 和 td 加 display: block 是卡片化第一步，否则伪元素和垂直堆叠都无效。关键不是“让表格看起来像卡片”，而是让浏览器放弃表格渲染逻辑，进入普通块级流。
常见错误是只改 td，漏掉 tr 和 thead：结果表头还占一行、行与行之间没间距、data-label 不触发。
-
tr必须设display: block，每行才真正独立成块 -
thead要display: none（移动端），否则表头会额外占空间 -
td设display: block后，用::before显示data-label才能生效 - 别碰
table的display——保持table值，否则语义丢失且可访问性受损
data-label + ::before 是移动端列名显示核心
没有 data-label，卡片里就只剩裸数据，用户根本不知道哪一栏是“订单号”还是“创建时间”。这个属性不是可选装饰，是语义补全的关键。
写法必须严格对应 HTML 结构：<td data-label="客户姓名">张三</td>，CSS 里用 td::before { content: attr(data-label) ": "; }。漏引号、拼错属性名、或把冒号写在伪元素外，都会导致标签不显示。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 所有
td都得带data-label，不能只加部分——否则读屏器无法连贯播报 - 避免用中文冒号后加空格再接内容，统一用
": "（英文冒号+空格）更稳定 - 如果列名含特殊字符（如括号、斜杠），
attr()会原样输出，无需转义
@media 中断点选 640px 还是 768px？看内容断裂点
别抄模板里的 @media (max-width: 768px)。真实场景中，三列表格在 623px 就开始挤压文字，此时卡片化就得启动；而四列导航栏可能到 685px 才换行——这些才是你该记下的数字。
用 Chrome DevTools 拖动响应式宽度滑块，盯住文字是否折行异常、图标是否重叠、按钮是否被截断。找到那个“突然变难读”的像素值，向上取整为 640px 或 720px，比硬套设备尺寸靠谱得多。
- 务必先写
<meta name="viewport" content="width=device-width, initial-scale=1.0">，否则媒体查询在手机上压根不触发 - 推荐用
min-width递进写法：基础样式（小屏）直接写，大屏用@media (min-width: 640px)增强，避免max-width套娃导致层叠混乱 - 别混用
max-width和min-width断点，比如同时写(max-width: 639px)和(min-width: 640px)，缩放 110% 时中间会留白失效
卡片内部溢出比外层布局更致命
就算 tr 全转成块、data-label 全配齐，卡片内部一张没约束的图片照样撑破容器、文字截断错位、按钮跑飞——外层再“响应式”，也救不了内脏失控。
每张卡片内部必须单独约束：
- 图片加
width: 100%; height: auto; object-fit: cover;，父容器设overflow: hidden - 标题用
display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2;截两行，比text-overflow: ellipsis更稳 - 绝对定位元素（如状态标签、删除按钮）要慎用——它脱离文档流，Grid/Flex 高度算不准，卡片高度会塌陷
- 避免在
td里嵌套div再设 Flex，多一层 DOM 就多一层计算误差，直接用伪元素和块级流更轻量
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
