使用Flexbox和媒体查询可实现响应式表格：桌面端用flex布局保持表格形态，移动端通过flex-direction: column将行转为垂直堆叠卡片，结合data-label与::before提升字段可读性，无需J*aScript，纯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 适配移动端

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

移动端适配样式：

来画数字人|直播|

来画数字人自动化|直播|，无需请真人主播，即可实现24小时|直播|，无缝衔接各大|直播|平台。

57 查看详情

@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 显示字段名称，提升可访问性
• 保持视觉一致性，如边框、圆角、间距等细节优化体验

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

以上就是如何在CSS中使用布局制作响应式表格布局_Flexbox和media queries结合的详细内容，更多请关注其它相关文章！

# css  # javascript  # java  # html  # 伪元素  # 网页设计  # 响应式设计  # 上海  # 弹性布局  # 移动端适配  # flex布局  # 单元格  # 如何在  # 北京  # 中不  # 中非  # 不均匀  # 是在  # 屏幕上  # 工业seo招聘  # 潍坊网站推广威星hfqjwl做词  # 购物网站建设公司  # 九龙坡优化网站建设费用  # 江门正规网站建设  # seo秒收录词  # 网站建设设计公司大全  # 西夏区网站推广  # 从赶驴网事件看网站推广  # 龙岩外贸网站建站和推广定制