如何在CSS中使用布局制作响应式表格布局_Flexbox和media queries结合

使用Flexbox和媒体查询可实现响应式表格：桌面端用flex布局保持表格形态，移动端通过flex-direction: column将行转为垂直堆叠卡片，结合data-label与::before提升字段可读性，无需JavaScript，纯CSS实现高性能响应式设计。

响应式表格布局在现代网页设计中非常常见，尤其是在数据展示类页面中。使用 Flexbox 结合 media queries 可以让表格在不同屏幕尺寸下保持良好的可读性和可用性，避免水平滚动或内容重叠。下面介绍如何通过 CSS 的 Flexbox 和媒体查询实现一个响应式表格。

使用 Flexbox 改造表格结构

传统的 table 元素在小屏幕上容易溢出容器，难以阅读。我们可以利用 Flexbox 将表格的行和单元格转换为弹性布局，从而更灵活地控制显示效果。

基本思路是：在桌面端保留类似表格的布局，在移动端将每行数据改为垂直堆叠的卡片样式。

示例 HTML 结构：

  
    姓名
    年龄
    城市
    职业
  
  
    张三
    28
    北京
    工程师
  
  
    李四
    32
    上海
    设计师
  

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 示例：

  张三
  28
  北京
  工程师

关键点总结

Flexbox 提供了强大的一维布局能力，适合将传统表格改造成响应式结构。结合 media queries 能够根据设备宽度切换布局模式。

• 用 display: flex 替代 table 布局，获得更高灵活性
• 在小屏幕上使用 flex-direction: column 实现垂直堆叠
• 通过 ::before 伪元素和 data-label 显示字段名称，提升可访问性
• 保持视觉一致性，如边框、圆角、间距等细节优化体验

基本上就这些。这种方式不依赖 JavaScript，纯 CSS 实现，性能好且易于维护。