真正有效的方案是用媒体查询将表格打散为块级卡片结构，通过data-label注入表头信息；thead需设display:none或绝对定位隐藏，td需position:relative配合::before绝对定位显示标签，大屏恢复时须同步重置tr、td、th及tbody的display值。
直接加 overflow-x: auto 不能解决小屏表格溢出问题——它只提供滚动能力，但用户根本不知道要滚、为什么滚、滚了看到什么。真正有效的方案是用媒体查询把表格“打散”成块级结构，让每行数据自成卡片，表头信息通过 data-label 注入。
为什么 display: block 转换后表头不见了
因为 thead 在块级布局中失去语义作用，浏览器默认不渲染它。你不能靠视觉隐藏（比如 visibility: hidden）来保留结构，必须显式移除或重置：
-
thead必须设为display: none或position: absolute; top: -9999px，否则可能在 DOM 中占位干扰布局 - 不能只隐藏
th，否则tr内部仍存在空盒，影响后续td的垂直堆叠对齐 - 如果用了
colgroup，它在display: block下完全失效，需提前移除或忽略
data-label 属性怎么加才不漏不乱
每个 td 都得有对应列名的 data-label，否则伪元素显示为空白。这不是可选优化，而是结构前提：
- 服务端渲染时，在循环生成
td的模板里直接插值：<td data-label="{{ column.name }}">{{ value }}</td> - 前端 JS 动态渲染时，别用
innerHTML拼接——容易丢属性，改用document.createElement('td')+setAttribute('data-label', ...) - 避免写死中文（如
data-label="创建时间"），换成英文键名（如data-label="createdAt"），方便 i18n 和自动化测试
伪元素 ::before 怎么对齐才不压住内容
::before 默认是 inline 级，和文本挤在一起，稍一换行就错位。关键不是调 margin，而是控制定位流：
立即学习“前端免费学习笔记（深入）”；
- 给
td设position: relative，再给::before设position: absolute，这样标签位置与内容解耦 -
left: 0+width: 40%比padding-left: 50%更可靠，后者在字体缩放或 zoom 下易崩 - 不要用
min-width强制标签宽度，长列名（如 “最后登录 IP 地址”）会撑破容器；改用max-width: 120px; overflow: hidden; text-overflow: ellipsis;
大屏恢复时 display: table-cell 不生效
这是最常踩的坑：只改 td 却忘了 tr 还是 block。CSS 表格模型要求父子匹配，table-cell 必须在 table-row 下才有效：
- 媒体查询里必须同步重置整条链：
tr { display: table-row; }+td, th { display: table-cell; } - 如果用了
tbody包裹，也要确认它没被设成display: block，否则子元素的table-cell依然无效 - 推荐用开关类名（如
.table--stacked）控制状态，比纯媒体查询更可控，也方便 JS 切换
rowspan/colspan 是硬伤，所有基于 display: block 的堆叠方案都绕不开这点。一旦有合并单元格，要么放弃该方案改用横向滚动，要么服务端输出两套 DOM。别指望 CSS 能“智能还原”跨行语义——它根本不存在于块级流中。
