display: block 或 flex 改表格渲染流可行但易致 iOS 卡顿、语义丢失；需设 width/min-width、flex-basis、margin-bottom、显式隐藏 thead，并用 data-label + ::before 实现卡片式响应布局，同时补 overflow-x、-webkit-overflow-scrolling 和 flex-shrink 等细节。
直接用 display: block 或 display: flex 改表格渲染流是可行的，但不补语义、不控尺寸、不处理滚动，90% 的页面会在 iOS 上卡顿或丢失字段含义。
为什么 display: block 后表格“看不见”或“堆成一团”
浏览器把 <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 位置
如何让每行变成带标签的卡片（纯 CSS，无 JS）
原 <th> 文本无法被伪元素复用，必须靠 data-label + ::before 注入。这是目前最稳、兼容性最好、无障碍支持到位的方案。
- 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 滚动失效的几个关键漏点
哪怕样式写对了，外层滚动容器行为异常，大概率是这几个细节漏了：
立即学习“前端免费学习笔记（深入）”；
- 滚动容器（比如
<div class="table-wrapper">）必须设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 很容易被跳过，但它们决定了屏幕阅读器能否正确播报整行数据。
