如何在CSS中使用布局制作响应式表格布局_Flexbox和media queries结合-css教程-PHP中文网

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

P粉602998670

发布： 2025-11-29 20:29:02

原创

266人浏览过

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

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

响应式表格布局在现代网页设计中非常常见，尤其是在数据展示类页面中。使用 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 适配移动端

当屏幕宽度较小时，将每一行从横向排列变为纵向排列，使每个“行”看起来像一张信息卡片，提升可读性。

AIBox 一站式AI创作平台

AIBox365一站式AI创作平台，支持ChatGPT、GPT4、Claue3、Gemini、Midjourney等国内外大模型

217

查看详情

移动端适配样式：

@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>

登录后复制