直接给或设display:block会破坏语义结构和可访问性；应改用css grid+语义化html（如带aria的）或display:table-row-group+flex组合方案，并注意隐藏表头时保留读屏器感知。
display:block 会让表格元素失去语义结构，别直接套用
直接给 <table> 或 <code><tr> 设 <code>display: block 看似能“堆叠”，但会破坏表格的固有渲染逻辑：表头（<th>）不再关联数据单元格（<code><td>），屏幕阅读器无法识别行列关系，<code>colspan/rowspan 失效，打印样式也大概率崩坏。
用 CSS Grid + 语义化 HTML 替代 display:block 堆叠
真正可靠的做法是保留语义化结构（比如用 <dl></dl>、<section></section> 或带 ARIA 的 <div>），再用 <code>display: grid 控制移动端布局。例如：
<div class="responsive-table">
<div class="row" aria-rowindex="1">
<div class="cell header" aria-colindex="1">姓名</div>
<div class="cell header" aria-colindex="2">城市</div>
</div>
<div class="row" aria-rowindex="2">
<div class="cell data" aria-colindex="1">张三</div>
<div class="cell data" aria-colindex="2">杭州</div>
</div>
</div>
<p><style>
.responsive-table {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.row { display: contents; } /<em> 保持语义流 /
.cell.header { font-weight: bold; }
@media (max-width: 600px) {
.responsive-table {
grid-template-columns: 1fr;
}
.cell.header { grid-column: 1; }
.cell.data { grid-column: 1; }
.row::before {
content: attr(aria-rowindex) " — ";
font-weight: bold;
}
}
</style></p>
这样既保证可访问性，又实现视觉堆叠，且支持动态列数调整。
