如何用CSS Grid实现Div表格的移动端响应式转置？

核心思路 #

通过CSS媒体查询，在移动端将横向布局的Div表格重构为纵向键值对布局——隐藏原表头，把每一行数据转为独立卡片，每个单元格通过伪元素关联对应表头文本，完美适配移动端窄屏。

实现步骤 #

1. 基础HTML结构

给每个数据单元格添加data-label属性，存储对应表头文本，方便移动端动态调用：

<div class="div-table">
  <!-- 桌面端表头 -->
  <div class="table-header">
    <div class="table-cell">姓名</div>
    <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" data-label="姓名">张三</div>
    <div class="table-cell" data-label="年龄">28</div>
    <div class="table-cell" data-label="职业">前端开发</div>
    <div class="table-cell" data-label="邮箱">zhangsan@example.com</div>
    <div class="table-cell" data-label="地址">北京市朝阳区</div>
  </div>
  <div class="table-row">
    <div class="table-cell" data-label="姓名">李四</div>
    <div class="table-cell" data-label="年龄">32</div>
    <div class="table-cell" data-label="职业">产品经理</div>
    <div class="table-cell" data-label="邮箱">lisi@example.com</div>
    <div class="table-cell" data-label="地址">上海市浦东新区</div>
  </div>
</div>

2. 桌面端CSS（横向布局）

用Flex实现类似原生表格的横向排列效果：

.div-table {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.table-header, .table-row {
  display: flex;
  border-bottom: 1px solid #eee;
}

.table-cell {
  flex: 1;
  padding: 12px;
  text-align: left;
}

.table-header .table-cell {
  font-weight: 700;
  background-color: #f5f5f5;
}

3. 移动端CSS（纵向转置布局）

通过媒体查询触发窄屏样式，彻底重构布局逻辑：

@media (max-width: 767px) {
  /* 隐藏桌面端表头 */
  .table-header {
    display: none;
  }

  /* 每个数据行转为独立卡片 */
  .table-row {
    display: block;
    border: 1px solid #eee;
    margin-bottom: 16px;
    border-radius: 8px;
    overflow: hidden;
  }

  /* 单元格转为键值对布局 */
  .table-row .table-cell {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #eee;
    padding: 10px 12px;
  }

  /* 去掉最后一个单元格的下边框 */
  .table-row .table-cell:last-child {
    border-bottom: none;
  }

  /* 通过data-label动态生成表头文本 */
  .table-row .table-cell::before {
    content: attr(data-label) "：";
    font-weight: 700;
    margin-right: 8px;
  }
}

关键细节 #

• data-label属性实现表头文本的动态复用，避免硬编码伪元素内容，适配后端动态生成的表格
• 移动端卡片式布局提升可读性和触摸交互体验
• Flex布局保证单元格内容自动对齐，兼容不同长度的文本内容

内容的提问来源于stack exchange，提问作者Andrew Koper