纯CSS无法直接将原生<table>转为语义正确、可访问、不卡顿的卡片视图；可行方案为双结构+@media切换，或用flex/grid重构视觉层。
纯 CSS 无法把原生 <table> 直接转成语义正确、可访问、不卡顿的卡片视图——display: block 对 <tr> 无效，<td> 会丢失布局上下文，iOS 上还容易滚动失灵。真能落地的只有两种方式：双结构 + @media 切换，或用 display: flex / display: grid 重构视觉层。
为什么直接给 <tr> 设 display: block 会失效
浏览器对表格元素有特殊渲染规则：<tr> 离开表格上下文后，不再参与行盒计算；<td> 默认 width: auto，又没父容器提供宽度约束，结果所有单元格收缩到内容宽度，文字换行、间距归零、视觉全乱。
-
<table>和<tr>必须显式设width: 100%或min-width: 100%，否则撑不开 -
<td>和<th>要加width: 100%（若父<tr>是display: flex，则用flex-basis: 100%） -
<thead>必须设display: none，只藏<th>没用，空<tr>仍占 DOM 位置 - 不设
margin-bottom的<tr>会紧贴，建议加margin-bottom: 1rem模拟行间距
用 display: flex 实现卡片式布局（推荐首选）
不改 HTML 结构，只靠 CSS 切换渲染逻辑，兼容性好、语义保留强、代码清晰。核心是让每行变成垂直卡片，字段名靠 data-label + ::before 注入。
- 每个
<td>必须带data-label="姓名"属性，值与对应<th>一致 -
<tr>设display: flex; flex-direction: column;，作为卡片容器 -
<td>设display: flex; justify-content: space-between;，左侧用::before { content: attr(data-label) ": "; } -
<td>加position: relative; padding-left: 80px;，::before设position: absolute; left: 0; top: 0;防重叠 - 别漏
box-sizing: border-box，否则padding会让宽度超限
iOS 滚动和可访问性关键细节
哪怕样式写对了，外层滚动容器行为异常，大概率是这几个点漏了：
立即学习“前端免费学习笔记（深入）”；
- 滚动容器（如
<div class="table-wrapper">）必须设overflow-x: auto和width: 100%，仅max-width不够 - 容器内不能对
<table>设white-space: nowrap，否则文本不折行，强行拉宽整个块 - iOS Safari 需要
-webkit-overflow-scrolling: touch才有惯性滚动，不加就卡顿 - 若用
display: flex，每个<td>必须加flex-shrink: 0，否则会被压缩到看不见 - 为保障可访问性，
<tr>应加role="row"，<td>加aria-labelledby关联字段名
真正难的不是写几行 display: block，而是让每张“卡片”尺寸可控、滚动顺滑、语义清晰——这些细节在桌面预览时完全看不出问题，一上真机就暴露。尤其是 data-label 字段顺序必须和表头严格一致，否则维护成本会指数级上升。
