HTML表格无法真正翻转，所谓“翻转”实为用data-label+伪元素实现垂直卡片布局，核心是每行变独立卡片、字段名前置；强行rotate()会导致可访问性与渲染问题。
别指望“翻转”表格——HTML table 本身不支持旋转或横竖切换，所谓“翻转”实际是放弃表格语义、用 CSS 重构为垂直卡片布局。核心不是让 tr 变成列，而是让每行数据自成一卡，靠 data-label 和伪元素重建字段上下文。
为什么直接 rotate() 或 transform 不行
强行给 table 加 transform: rotate(90deg) 会导致：内容不可读（文字倒置）、触控区域错位、屏幕阅读器完全无法识别结构、iOS Safari 渲染异常。这不是响应式，是视觉障眼法。
真正要解决的是「小屏下字段和值脱节」问题，而不是物理旋转 DOM。
用 data-label + @media 实现卡片化“翻转”
本质是把每条 tr 当作一个独立区块，每个 td 垂直堆叠，并在前面显示对应列名。前提是 HTML 中已标注 data-label：
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
<table class="responsive-table">
<thead>
<tr>
<th>订单号</th>
<th>下单时间</th>
<th>金额</th>
<th>状态</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="订单号">ORD-2026-7890</td>
<td data-label="下单时间">2026-07-08 14:22</td>
<td data-label="金额">¥298.00</td>
<td data-label="状态">已发货</td>
</tr>
</tbody>
</table>
-
data-label必须写在每个td上，不能只靠th推导——CSS 无法跨元素取值 - @media 规则中必须隐藏
thead，否则表头和卡片内容重复 -
td::before { content: attr(data-label); }是关键，它把字段名“挂”在值前面 - 避免对
td使用display: block后再设float——现代布局推荐用display: grid或flex控制间距
table-layout: fixed 在这里没用
这个属性只控制列宽计算逻辑，对卡片化毫无帮助。加了反而容易因缺少 width 声明导致整表塌缩或溢出。它只在你坚持横向滚动或强制压缩列宽时才需启用，且必须配套：width: 100% 写在 table 上、<col> 或 th 显式设宽、父容器不能是 flex 或 grid。
Outlook 邮件客户端完全忽略 table-layout: fixed，如果表格用于邮件模板，这条规则等于不存在。
水平滚动方案什么时候该选
当用户需要横向比对多列数值（比如价格、库存、销量并排看），或表格列数 ≤ 4 且字段名简短（如 “ID/Name/Status”），这时卡片化会破坏比较逻辑。此时更合理的选择是：
- 外层用
<div style="overflow-x: auto">包裹table - 加
viewportmeta：<meta name="viewport" content="width=device-width, initial-scale=1"> - 在滚动容器底部加视觉提示（如渐变遮罩或箭头图标），暗示可滑动
- 避免在
td里放长文本或图片——它们会撑破容器，优先用省略号text-overflow: ellipsis
卡片化看似“高级”，但会彻底丢失行间横向关系；水平滚动看似“妥协”，却是保留比较能力的底线。选哪个，取决于用户在手机上到底要“扫一条记录”还是“比几列数字”。
