移动端表格截断主因是table默认display: table在小屏无法自适应，最优解是不改HTML前提下将table/tr/td/th全设为display: block并用data-label维持行列语义。
移动端表格内容被截断或横向滚动失控
直接原因是 table 元素默认的 display: table 行为在小屏上无法自动换行或压缩，浏览器强行保持列宽导致溢出。不改 HTML 结构的前提下，用 display: block 重构是最可控的出路。
- 把
table、tr、td/th全部设为display: block，让它们退化成普通块级元素，脱离表格渲染逻辑 -
td和th需加width: 100%或flex-basis: 100%（配合父级display: flex）才能撑满，否则可能塌缩 - 表头
th建议保留font-weight: bold和text-align: left，视觉上仍可区分，但不再依赖语义对齐 - 避免对
table设overflow-x: auto——这只会藏起问题，用户仍要手动拖拽，体验差且不可访问
用 display: block 后如何维持行列对应关系
原生表格靠结构隐式绑定“第2行第3列”，改成块级后这个关系就丢了。必须靠 CSS 层级或属性显式重建。
- 给每个
tr加position: relative，再给每个td加position: absolute并配top/left——太重，不推荐 - 更轻量的做法：用
data-label属性存原列名，例如<td data-label="订单号">#ORD-789</td>，CSS 中用::before插入标签：content: attr(data-label) ": " - 如果 JS 可控，也可在初始化时遍历
th文本，动态写入所有同列td的data-label，避免手写冗余 - 注意
data-label方案在屏幕阅读器中不会自动朗读，如需无障碍，得额外加aria-label
IE11 或旧版 Safari 下 display: block 表格样式错乱
老浏览器对 table 元素强制应用 UA 样式，即使设了 display: block，仍可能残留边框、间距或盒模型异常。
- 必须重置所有表格相关 UA 样式：
border-collapse: separate、border-spacing: 0、caption-side: top全部显式覆盖 - IE11 不支持
display: contents，别试图用它绕过table；display: block是唯一稳妥选择 - 旧 Safari（iOS 9.3）对
display: block+width: 100%在td上有计算误差，建议统一用flex替代：tr { display: flex; flex-direction: column; }，td { flex: 1; } - 测试时重点看嵌套表格——外层
display: block会传染到内层，需单独加table { display: table; }覆盖
性能与可维护性陷阱：什么时候不该用 display: block
不是所有表格都适合这套方案。数据量大、交互频繁（如排序、筛选、分页）时，DOM 结构扁平化反而增加 JS 维护成本。
立即学习“前端免费学习笔记（深入）”；
- 超过 50 行且带搜索/排序的表格，建议用虚拟滚动 + 原生
table，或换用专门的表格库（如react-table），别硬套 CSS 重构 - 如果表格含
colspan/rowspan，display: block后无法自然还原跨格逻辑，需用 JS 拆解并插入占位div，复杂度陡增 - 打印样式（
@media print）里务必还原回display: table，否则打印出来是堆叠的文本块 - 团队协作时，要在 CSS 文件头部加注释说明：
/* display: block 仅用于移动端响应式，勿在其他上下文复用 */
事情说清了就结束。真正难的不是怎么写那几行 CSS，而是判断这张表到底该不该被“拆成块”。
