唯一保语义、兼容读屏器且不崩layout的路径是直接改display属性；需整套降级table、thead、tbody、tr、td为block，移除border-collapse等干扰声明，并用data-label+::before替代th文本，卡片间距设margin-bottom，图片需overflow:hidden容器约束，大屏时重置display并启用table-layout:fixed。
直接改 display 属性，不是加 class 或 JS 控制显隐——这是唯一能保语义、兼容读屏器、且不崩 layout 的路径。
为什么不能只给 td 加 display: block
常见错误是只动 td，结果表头还横着占一行、每行之间没间距、data-label 伪元素压根不显示。因为浏览器仍按表格渲染模型处理：哪怕 td 是块级，它父级 tr 还是表格行盒，thead 仍强制占据独立行流空间。
必须整套降级：table、thead、tbody、tr、td 全部设为 display: block（thead 小屏下建议 display: none）；同时移除 border-collapse 和 table-layout 相关声明，否则块级渲染会被干扰。
怎么用 data-label 替代原始 th 文本
小屏下 th 变成 display: block 后，它和对应 td 已无上下文绑定关系，硬塞 th 内容会导致重复或错位。
实操做法是：
• 在每个 td 上加 data-label 属性，例如：<td data-label="订单号">ORD-2026-7890</td>
• 媒体查询中给 td 设 position: relative
• 用 ::before { content: attr(data-label); } 插入标签
• 若需对齐或截断，加 display: inline-block 或 white-space: nowrap; text-overflow: ellipsis;
小屏卡片间距与图片约束怎么写才不破
卡片内部结构失控，比外层布局崩得更快：
• 每张卡片（即每个 tr）要设 margin-bottom: 1rem 划分区块，别依赖 padding 或 gap
• 图片必须包一层 overflow: hidden 容器，img 自身设 width: 100%; height: auto; object-fit: cover;，直接加 border-radius 会裁剪而非圆角
• 长标题或描述用 display: -webkit-box; -webkit-line-clamp: 2; overflow: hidden;，比 text-overflow: ellipsis 更稳
• 卡片内禁用 position: absolute 放按钮或标签——它脱离文档流，Grid/Flex 高度算不准，Safari 下尤其错位
table-layout: fixed 在大屏时要不要保留
要，但仅限大屏恢复时：
• 小屏用卡片化，大屏必须切回原表格语义，否则可访问性丢失、打印样式异常
• 大屏媒体查询里，要把 table、tr、td、th 的 display 值重置回 table、table-row、table-cell 等原生值
• 此时再启用 table-layout: fixed，配合 width: 100% 和显式列宽（如 <col width="120">），防止长文本撑爆列
• 注意：Outlook 等邮件客户端不支持 table-layout: fixed，发邮件时别依赖它
真正卡住人的不是怎么写 CSS，而是忘记 tr 必须设 display: block 才能让每行真正独立；以及 data-label 不是锦上添花，是小屏下唯一能绑定字段名和值的语义锚点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
