使用Flexbox和媒体查询可实现响应式表格：桌面端用flex布局保持表格形态，移动端通过flex-direction: column将行转为垂直堆叠卡片，结合data-label与::before提升字段可读性，无需JavaScript，纯CSS实现高性能响应式设计。
响应式表格布局在现代网页设计中非常常见，尤其是在数据展示类页面中。使用 Flexbox 结合 media queries 可以让表格在不同屏幕尺寸下保持良好的可读性和可用性，避免水平滚动或内容重叠。下面介绍如何通过 CSS 的 Flexbox 和媒体查询实现一个响应式表格。
使用 Flexbox 改造表格结构
传统的 table 元素在小屏幕上容易溢出容器，难以阅读。我们可以利用 Flexbox 将表格的行和单元格转换为弹性布局，从而更灵活地控制显示效果。
基本思路是：在桌面端保留类似表格的布局，在移动端将每行数据改为垂直堆叠的卡片样式。
示例 HTML 结构：
立即学习“前端免费学习笔记（深入）”；
<div class="responsive-table">
<div class="table-row header">
<div class="table-cell">姓名</div>
<div class="table-cell">年龄</div>
<div class="table-cell">城市</div>
<div class="table-cell">职业</div>
</div>
<div class="table-row">
<div class="table-cell">张三</div>
<div class="table-cell">28</div>
<div class="table-cell">北京</div>
<div class="table-cell">工程师</div>
</div>
<div class="table-row">
<div class="table-cell">李四</div>
<div class="table-cell">32</div>
<div class="table-cell">上海</div>
<div class="table-cell">设计师</div>
</div>
</div>CSS 样式（桌面端）：
.responsive-table {
display: block;
width: 100%;
}
.table-row {
display: flex;
width: 100%;
border-bottom: 1px solid #ddd;
}
.header {
font-weight: bold;
background-color: #f5f5f5;
}
.table-cell {
flex: 1;
padding: 12px;
box-sizing: border-box;
}使用 Media Queries 适配移动端
当屏幕宽度较小时，将每一行从横向排列变为纵向排列，使每个“行”看起来像一张信息卡片，提升可读性。
移动端适配样式：
@media (max-width: 768px) {
.table-row {
flex-direction: column;
border: 1px solid #ddd;
margin-bottom: 10px;
border-radius: 4px;
}
.table-cell {
width: 100%;
border-bottom: 1px solid #eee;
padding: 10px;
}
.table-cell:last-child {
border-bottom: none;
}
/* 可选：为每个单元格添加标签提示 */
.table-cell::before {
content: attr(data-label) ": ";
font-weight: bold;
display: inline;
}
}增强语义：为单元格添加 data-label
为了让移动端用户清楚每个值对应什么字段，可以在 HTML 中为每个单元格添加 data-label 属性，并在 CSS 中显示出来。
更新后的 HTML 示例：
<div class="table-row"> <div class="table-cell" data-label="姓名">张三</div> <div class="table-cell" data-label="年龄">28</div> <div class="table-cell" data-label="城市">北京</div> <div class="table-cell" data-label="职业">工程师</div> </div>
关键点总结
Flexbox 提供了强大的一维布局能力，适合将传统表格改造成响应式结构。结合 media queries 能够根据设备宽度切换布局模式。
- 用
display: flex替代table布局，获得更高灵活性 - 在小屏幕上使用
flex-direction: column实现垂直堆叠 - 通过
::before伪元素和data-label显示字段名称，提升可访问性 - 保持视觉一致性，如边框、圆角、间距等细节优化体验
基本上就这些。这种方式不依赖 JavaScript，纯 CSS 实现，性能好且易于维护。
