直接设display: block可行但需手动补全语义与尺寸控制：tr/td设width:100%防塌缩，td用data-label+::before模拟表头，position:relative+absolute分离标签与内容，并补role="row"保障可访问性。
直接把 <table>、<code><tr>、<code><td> 全设成 <code>display: block 是可行的，但不加约束会塌缩、错位、丢失表头语义——关键在重写渲染流的同时，手动补全语义和尺寸控制。
为什么 display: block 后表格“消失”或“挤成一团”
浏览器把 <tr> 设为 <code>display: block 后，它不再参与表格行盒计算，<td> 默认 width 为 auto，又没父容器给宽度上下文，结果就是所有单元格收缩到内容宽度，堆叠在一起、文字换行、间距全乱。
<ul><li><code><table> 和 <code><tr> 必须设 <code>width: 100% 或 min-width: 100%，否则无法撑开布局
<td> 和 <code><th> 要加 <code>width: 100% 或 flex-basis: 100%（若父 <tr> 是 <code>display: flex）
margin-bottom 的 <tr> 会紧贴在一起，建议加 <code>margin-bottom: 1rem 模拟行间距
<thead> 必须显式隐藏：用 <code>display: none，不能只藏 <th>，否则空 <code><tr> 仍占 DOM 位置
<h3>如何让每行变成带标签的卡片</h3>
<p>纯 CSS 无法复用原 <code><th> 文本，必须靠 <code>data-label + ::before 注入。这是目前最稳定、兼容性最好、无需 JS 的方案。
- HTML 中每个
<td> 都要带 <code>data-label="姓名"这类属性，值与对应<th> 文本一致 <li>CSS 里写 <code>td::before { content: attr(data-label) ": "; font-weight: bold; } - 为避免标签和内容重叠，
<td> 要设 <code>position: relative，::before设position: absolute; left: 0; top: 0;，再配padding-left: 80px留出空间 - 别忘了加
box-sizing: border-box，否则 padding 会让宽度超限 - 滚动容器（比如
<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替代block布局，每个<td> 必须加 <code>flex-shrink: 0，否则会被压缩到看不见真正难的不是写几行
display: block，而是让每张“卡片”保持语义清晰、尺寸可控、滚动顺滑，同时不破坏可访问性——role="row"和aria-labelledby得手动补上，否则屏幕阅读器会完全迷失。
哪些地方容易被忽略导致 iOS 滚动失效
即使用了 display: block，如果外层滚动容器行为异常，大概率是这几个细节漏了：
