在移动端展示后台数据报表时，原生HTML表格的固定行列结构会成为排版障碍。当视口宽度小于表格最小内容宽度，浏览器默认只会撑破布局或开启滚动条。CSS的display切换方案核心在于：用媒体查询捕获窄屏状态，把table、thead、tbody、tr、td等标签的display值从table系列改为block，从而解除表格内部的行列绑定，让每个单元格独立成块。配合content属性与伪元素，还能把原表头文本注入单元格之前，弥补视觉表头消失的问题。
一、基础display切换实现
最简单的场景是无合并单元格的普通数据表。我们在桌面端保留标准表格样式，当屏幕宽度不超过600px时，通过媒体查询重写display。注意thead通常需要隐藏，因为其内容无法直接对应到每个块级单元格，我们改用td的伪元素承载字段名。
下面的代码演示了最小可用版本。我们在td上使用data-label属性存放列名，在CSS里用attr()函数读取并渲染。这样无需JS即可让用户在手机上看到“字段名：值”的卡片列表，而不是横滑的压缩表格。
<style>
table { width: 100%; border-collapse: collapse; }
th, td { padding: 8px; border: 1px solid #ccc; text-align: left; }
/* 窄屏切换 */
@media (max-width: 600px) {
thead { display: none; }
table, tbody, tr, td { display: block; width: 100%; }
tr { margin-bottom: 12px; border: 1px solid #999; }
td { border: none; border-bottom: 1px solid #eee; }
td::before {
content: attr(data-label);
display: inline-block;
width: 40%;
font-weight: bold;
color: #333;
}
}
</style>
<table>
<thead>
<tr><th>姓名</th><th>年龄</th><th>城市</th></tr>
</thead>
<tbody>
<tr>
<td data-label="姓名">张三</td>
<td data-label="年龄">28</td>
<td data-label="城市">北京</td>
</tr>
</tbody>
</table>
这种写法的优势是零脚本、易理解。但它要求所有td必须手写data-label，当表格列很多或后端动态渲染时，前端模板需要额外输出该属性。若遗漏，窄屏下用户就看不到字段含义。
另外，display切换后，原本的table布局算法完全失效。单元格宽度由块级流决定，无法再使用table-layout: fixed控制比例。如果某列内容特别长，撑开伪元素后的行高会不一致，需要额外加word-break或限定最大宽度。
二、处理复杂表头与可访问性
当表格带有colspan或rowspan时，直接全部转block会破坏语义。例如一个跨两列的单元格在卡片视图里会变得难以解释。此时可保留部分display: table组合，仅对特定行切换，或借助role属性声明。但纯CSS方案很难完美还原，通常建议对复杂表在窄屏改为明细列表而非强行卡片化。
可访问性方面，隐藏thead并用伪元素显示字段名，屏幕阅读器不一定会把content生成的文本与单元格关联。更稳妥的做法是用视觉隐藏（position: absolute; left: -9999px）保留真实th，而不是display: none，这样AT设备仍能读取表头关系。
/* 视觉隐藏但保留可访问性 */
@media (max-width: 600px) {
thead th {
position: absolute;
left: -9999px;
top: auto;
}
/* 其余td仍用data-label做视觉提示 */
}
从维护角度看，如果项目里有多张结构不同的表格，每一张都要写一遍data-label与媒体查询，样式膨胀明显。可以考虑用CSS变量统一断点，或用预处理器循环生成列名，但这已经偏离纯手工CSS的简洁初衷。
对比JavaScript方案（如自动把表头转成data属性、或改成div布局），display切换的运行时开销为零，但人工标注成本偏高。在字段稳定、改动少的后台系统里，它依然是性价比很高的选择。
三、断点选择与细节优化
断点不应只看设备宽度，而要看表格自身最小宽度。假设表格自然宽度为720px，那么断点应设在720px而非通用手机尺寸。可用max-width结合容器查询（container queries）更精准控制：当表格容器小于其内容时再切换。
此外，为了避免切换瞬间的闪烁，建议在桌面端就给td预留伪元素空间，或通过@media (hover: none)区分触屏与鼠标环境。下例展示用容器查询的写法（需浏览器支持）。
.table-wrap {
container-type: inline-size;
}
@container (max-width: 600px) {
.table-wrap thead { display: none; }
.table-wrap table,
.table-wrap tbody,
.table-wrap tr,
.table-wrap td { display: block; }
.table-wrap td::before {
content: attr(data-label);
font-weight: bold;
margin-right: 8px;
}
}
容器查询让表格在侧边栏等窄区也能正确折叠，而不依赖整个视口。这对 dashboard 类页面尤其有用。若需兼容旧浏览器，则退化到视口媒体查询即可，逻辑完全一致。
最后提醒，display切换只是响应式表格的其中一种思路。如果数据量极大，卡片式会让页面变得很长，此时横向滚动配合冻结首列可能更合适。技术选型应基于阅读场景，而非单纯追求无JS。