必须将tr和td同时设为display: block以实现语义保留的卡片式渲染，仅改td会导致布局错乱、伪元素失效、data-label无法提取；thead需display: none隐藏；data-label与::before配合是列名显示唯一可靠方式，且断点须依实际内容崩塌点设定。
直接改 display 属性，不是加样式就能“看起来像卡片”——表格语义必须保留，但渲染逻辑必须切换成块级流，否则伪元素、垂直堆叠、列名标注全失效。
tr 和 td 必须同时设为 display: block
只改 td 不改 tr，表行仍按表格逻辑占位，导致：
- 表头和数据行挤在同一行
- 行间距无法控制
- ::before 伪元素不触发（因为 td 在表格上下文中不接受块级伪元素行为）
- data-label 值无法通过 attr() 提取
thead 在移动端必须设 display: none，否则它会额外占一行空白空间，破坏卡片独立性。
别碰 table 元素本身的 display 值——保持默认 table，否则读屏器无法识别语义结构，role="table" 也救不回来。
data-label + ::before 是列名显示的唯一可靠方式
没有 data-label，移动端卡片里就只剩裸数据，用户根本分不清哪列是“订单号”，哪列是“状态”。这不是装饰，是语义补全。
写法必须严格匹配：
- HTML 中每个
td都得带data-label="列名"，不能漏、不能只加部分 - CSS 写成
td::before { content: attr(data-label) ": "; } - 冒号必须是英文
:，后面紧跟一个空格，写成": "，中文冒号或无空格会导致渲染异常 - 列名含括号、斜杠等字符无需转义，
attr()会原样输出
断点别抄模板，用 DevTools 找真实内容断裂点
硬套 @media (max-width: 768px) 很容易失效。真实场景中：
- 三列表格在 623px 就开始文字折行难读
- 四列操作栏可能到 685px 才换行
- 图片+文本+按钮组合常在 640px 左右出现重叠
用 Chrome DevTools 的响应式调试滑块拖动宽度，盯住：
- 文字是否突然折两行
- 按钮是否被截断
- 图标是否错位
找到那个“视觉可读性崩塌”的像素值，向上取整作为断点（比如640px或720px）
推荐统一用 min-width 递进写法：基础样式写小屏，大屏用 @media (min-width: 640px) 增强，避免 max-width 套娃导致缩放时中间留白失效。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
卡片内部约束比外层布局更关键
再漂亮的网格排版，也救不了卡片内部溢出：
- img 必须设 width: 100%; height: auto; display: block;，否则底部有间隙、拉伸变形、触发 CLS
- 标题/描述过长？用 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; 单行截断，比 -webkit-line-clamp 兼容性更稳
- 卡片容器加 max-width: 100%; width: 300px;，保证小屏自适应、大屏不撑爆
- card-content 区域别设固定 height，用 padding 控制呼吸感，留出触控余量
所有这些约束，都得落在每张“卡片”（即每个 tr）内部，而不是只靠外层 table 或容器控制。
真正卡住人的地方不在怎么画阴影或圆角，而在表格语义和块级流之间的那条分界线——跨过去，才能让 data-label 生效、让伪元素落地、让每一行真正成为一张独立卡片。
