纯css无法直接将原生转为语义正确、可访问、不卡顿的卡片视图；可行方案为双结构+@media切换，或用flex/grid重构视觉层。

纯 CSS 无法把原生 <table> 直接转成语义正确、可访问、不卡顿的卡片视图——<code>display: block 对 <tr> 无效，<code><td> 会丢失布局上下文，iOS 上还容易滚动失灵。真能落地的只有两种方式：双结构 + <code>@media 切换，或用 display: flex / display: grid 重构视觉层。

为什么直接给 <tr> 设 <code>display: block 会失效

浏览器对表格元素有特殊渲染规则：<tr> 离开表格上下文后，不再参与行盒计算；<code><td> 默认 <code>width: auto，又没父容器提供宽度约束，结果所有单元格收缩到内容宽度，文字换行、间距归零、视觉全乱。

• <table> 和 <code><tr> 必须显式设 <code>width: 100% 或 min-width: 100%，否则撑不开
• <td> 和 <code><th> 要加 <code>width: 100%（若父 <tr> 是 <code>display: flex，则用 flex-basis: 100%）
• <thead> 必须设 <code>display: none，只藏 <th> 没用，空 <code><tr> 仍占 DOM 位置 <li>不设 <code>margin-bottom 的 <tr> 会紧贴，建议加 <code>margin-bottom: 1rem 模拟行间距

  用 display: flex 实现卡片式布局（推荐首选）

  不改 HTML 结构，只靠 CSS 切换渲染逻辑，兼容性好、语义保留强、代码清晰。核心是让每行变成垂直卡片，字段名靠 data-label + ::before 注入。

  • 每个 <td> 必须带 <code>data-label="姓名" 属性，值与对应 <th> 一致 <li><code><tr> 设 <code>display: flex; flex-direction: column;，作为卡片容器
  • <td> 设 <code>display: flex; justify-content: space-between;，左侧用 ::before { content: attr(data-label) ": "; }
  • <td> 加 <code>position: relative; padding-left: 80px;，::before 设 position: absolute; left: 0; top: 0; 防重叠
  • 别漏 box-sizing: border-box，否则 padding 会让宽度超限

  iOS 滚动和可访问性关键细节

  哪怕样式写对了，外层滚动容器行为异常，大概率是这几个点漏了：

  
  CSS婚礼策划服务机构宣传网站模板
  CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。
  下载
  • 滚动容器（如 <div class="table-wrapper">）必须设 <code>overflow-x: auto 和 width: 100%，仅 max-width 不够
  • 容器内不能对 <table> 设 <code>white-space: nowrap，否则文本不折行，强行拉宽整个块
  • iOS Safari 需要 -webkit-overflow-scrolling: touch 才有惯性滚动，不加就卡顿
  • 若用 display: flex，每个 <td> 必须加 <code>flex-shrink: 0，否则会被压缩到看不见
  • 为保障可访问性，<tr> 应加 <code>role="row"，<td> 加 <code>aria-labelledby 关联字段名

    真正难的不是写几行 display: block，而是让每张“卡片”尺寸可控、滚动顺滑、语义清晰——这些细节在桌面预览时完全看不出问题，一上真机就暴露。尤其是 data-label 字段顺序必须和表头严格一致，否则维护成本会指数级上升。