直接用 display: table 做响应式布局不可行，因其不响应、不折叠、不适应小屏；真正可行的是用 display: block + data-label 拆解表格结构，在移动端重建语义与可读性。
直接用 display: table 模拟响应式布局是条死路——它不响应、不折叠、不适应小屏，反而会让布局更僵硬。真正能落地的方案，是主动“拆解”表格结构，用 display: block + 伪元素 + data-label 在移动端重建语义和可读性。
为什么不能直接用 display: table 做响应式
display: table 只是让非表格元素表现得像表格（比如 div 模拟 table），但它不会改变表格固有的二维刚性结构。媒体查询里给 table 加 display: block 是必须的起点，而不是终点；如果只改容器却保留 tr/td 的默认行为，小屏上依然会溢出或错位。
-
display: table不支持断点下的列隐藏、堆叠或重排，它只是“看起来像表格”，不是“能响应的表格” - 浏览器对
display: table-cell的最小宽度限制极强，min-width往往失效，导致小屏强制横向滚动 - 在 Flex/Grid 已成标配的今天，用
display: table实现布局属于过时路径，维护成本高且不可预测
display: block + data-label 是最可控的拆解方式
核心动作不是“让表格变响应”，而是“把表格当普通 HTML 重新组织”。关键在于：先用 display: block 把所有表格元素降级为块，再靠 data-label 把表头信息“嫁接”回每个单元格。
- HTML 中每个
<td>必须显式带data-label，值等于对应<th>的文本，例如<td data-label="订单号">#20260716</td> - CSS 中用
td::before { content: attr(data-label) ": "; }把标签注入，避免 JS 动态读取开销 - 必须重置
td的padding-left，否则伪元素会和内容重叠；推荐用position: relative+left: 0控制伪元素位置 -
thead在小屏下设为display: none，但不要删掉——屏幕阅读器仍需它，且大屏需复用
容易被忽略的兼容性细节
这套方案看似简单，但几个边界情况常导致上线后出问题：
立即学习“前端免费学习笔记（深入）”；
-
attr(data-label)在旧版 Safari（data-label="order-id" 而非data-label="订单编号" - 若表格有
colspan或rowspan，data-label无法自动继承，必须手动补全每个跨单元格的属性 - 伪元素的
min-width设太小，长标签会挤占内容空间；设太大，窄屏又撑破容器——推荐用max-width: 30vw动态约束 - 行内样式或第三方 CSS 可能重置
::before的display，务必加!important或提高选择器权重
真正难的不是写几行 CSS，而是把每张表的语义关系从“隐式依赖表格结构”转为“显式绑定到每个单元格”。一旦漏掉一个 data-label，移动端那行数据就彻底失去上下文——这种错误不会报错，只会静默地让用户看不懂。
