最可控、无障碍友好的方案是用 display: block 或 display: flex 切换表格渲染流，配合 data-label + ::before 注入字段名；硬改 table 的 display 值而不补尺寸和滚动细节，90% 会卡在 ios 上或被屏幕阅读器跳过。
直接用 display: block 或 display: flex 切换表格渲染流，配合 data-label + ::before 注入字段名，是最可控、无障碍友好的方案。硬改 table 的 display 值而不补尺寸和滚动细节，90% 会卡在 iOS 上或被屏幕阅读器跳过。
为什么不能只靠 display: block 隐藏 thead 就完事？
浏览器把 tr 设为 display: block 后，它就脱离表格行盒计算逻辑；td 默认 width: auto，又没父容器给宽度上下文，结果所有单元格收缩到内容宽度，文字换行、间距归零、视觉全乱。
-
table和tr必须设width: 100%或min-width: 100%，否则撑不开布局 -
td和th要加width: 100%（若父tr是display: flex，则用flex-basis: 100%） - 不设
margin-bottom的tr会紧贴，建议加margin-bottom: 1rem模拟行间距 -
thead必须显式display: none，只藏th没用，空tr仍占 DOM 位置
怎样让每张卡片带字段名（Key-Value）且不重叠？
原 th 文本无法被伪元素复用，必须靠 data-label 属性把表头信息“存”到对应单元格，再通过 CSS 在移动端生成标签文本。
- HTML 中每个
td都要带data-label="状态"这类属性，值与对应th一致 - CSS 写
td::before { content: attr(data-label) ": "; font-weight: bold; } - 为防标签和内容重叠，
td设position: relative，::before设position: absolute; left: 0; top: 0;，再配padding-left: 80px留空间 - 别漏
box-sizing: border-box，否则padding会让宽度超限
iOS Safari 卡顿或滚动失效的几个关键漏点
哪怕样式写对了，外层滚动容器行为异常，大概率是这几个细节漏了：
- 滚动容器（比如
<div class="table-wrapper">）必须设 <code>overflow-x: auto和width: 100%，仅max-width不够 - 容器内不能对
table设white-space: nowrap，否则文本不折行，强行拉宽整个块 - iOS Safari 需要
-webkit-overflow-scrolling: touch才有惯性滚动，不加就卡顿 - 如果用了
display: flex替代block布局，每个td必须加flex-shrink: 0，否则会被压缩到看不见
真正难的不是写几行 display: block，而是让每张卡片保持语义清晰、尺寸可控、滚动顺滑，同时不破坏可访问性——role="row" 和 aria-labelledby 很容易被跳过，但它们决定了屏幕阅读器能否正确播报整行数据。
