直接设display: block可行但需手动补全语义与尺寸控制：tr/td设width:100%防塌缩，td用data-label+::before模拟表头，position:relative+absolute分离标签与内容，并补role="row"保障可访问性。
直接把 <table>、<tr>、<td> 全设成 display: block 是可行的，但不加约束会塌缩、错位、丢失表头语义——关键在重写渲染流的同时，手动补全语义和尺寸控制。
为什么 display: block 后表格“消失”或“挤成一团”
浏览器把 <tr> 设为 display: block 后，它不再参与表格行盒计算，<td> 默认 width 为 auto，又没父容器给宽度上下文，结果就是所有单元格收缩到内容宽度，堆叠在一起、文字换行、间距全乱。
-
<table>和<tr>必须设width: 100%或min-width: 100%，否则无法撑开布局 -
<td>和<th>要加width: 100%或flex-basis: 100%（若父<tr>是display: flex） - 不设
margin-bottom的<tr>会紧贴在一起，建议加margin-bottom: 1rem模拟行间距 -
<thead>必须显式隐藏：用display: none，不能只藏<th>，否则空<tr>仍占 DOM 位置
如何让每行变成带标签的卡片
纯 CSS 无法复用原 <th> 文本，必须靠 data-label + ::before 注入。这是目前最稳定、兼容性最好、无需 JS 的方案。
- 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 滚动失效
即使用了 display: block，如果外层滚动容器行为异常，大概率是这几个细节漏了：
立即学习“前端免费学习笔记（深入）”；
- 滚动容器（比如
<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 得手动补上，否则屏幕阅读器会完全迷失。
