响应式表格布局不能只靠display: table，因其无响应逻辑；需用媒体查询切换display值，配合table-layout: fixed和data-label伪元素确保小屏可读性。
响应式表格布局为什么不能只靠 display: table 硬切
直接给 <div> 加 display: table 并不能让列表在小屏下自动“变成”竖排卡片。CSS 表格布局本身不带响应逻辑，table、table-row、table-cell 这套行为是静态的——它只保证渲染结构符合表格模型，但不会根据视口缩放或重排内容流向。真正在移动端可读的“响应式数据列表”，核心是用媒体查询主动切换显示模式，而不是依赖表格属性自适应。
用 @media 切换 display 值才是关键路径
典型做法是：默认用 display: table 模拟表格（兼容老浏览器、语义清晰），小屏时切到 display: block + 子项堆叠。注意不是所有元素都适合一刀切换，需分层控制：
-
<div class="data-table">设为display: table，宽度 100%，table-layout: fixed防止列宽被内容撑爆 -
<div class="data-row">设为display: table-row，不设宽高，由内容撑开 -
<div class="data-cell">设为display: table-cell，加vertical-align: top对齐 - 在
@media (max-width: 768px)内，把.data-row改成display: block，.data-cell改成display: block，再加margin-bottom: 0.5em模拟间距
这样既保留了桌面端表格的对齐优势，又在小屏获得可控的竖排流式结构。
table-layout: fixed 在响应式中比 auto 更可靠
默认 table-layout: auto 会扫描全部内容算列宽，导致小屏下某列文本过长时整行错位甚至溢出。设成 fixed 后，列宽只由第一行（或显式 width）决定，后续行内容自动换行或截断，更利于响应控制：
立即学习“前端免费学习笔记（深入）”；
.data-table {
table-layout: fixed;
width: 100%;
}
.data-cell:first-child { width: 20%; }
.data-cell:nth-child(2) { width: 30%; }
.data-cell:last-child { width: 50%; }
配合 word-break: break-word 或 overflow-wrap: break-word，能稳住窄列内的长文本。
移动端竖排时别忽略表头语义丢失问题
纯 CSS 切换后，原本靠 table-header-group 实现的表头会失去上下文。用户看不到“这列对应什么字段”。解决方法不是加 JS，而是用 ::before 伪元素注入字段名：
@media (max-width: 768px) {
.data-cell::before {
content: attr(data-label) ": ";
font-weight: bold;
}
}
然后在 HTML 中每个 .data-cell 上加 data-label="姓名"、data-label="邮箱" 等。这个技巧轻量、无 JS 依赖，且不影响桌面端原有表格结构。
真正难的不是写几行 display 切换，而是想清楚哪些视觉关系必须保留（比如字段和值的绑定）、哪些可以舍弃（比如横向对齐）。一旦漏掉 data-label 或忘了 table-layout: fixed，小屏下数据就容易看串行或压根对不上字段。
