基于grid-template-areas的响应式表格CSS优化问询

你的当前方案用grid-template-areas实现了小屏列折叠，但需要给每行加类确实不够高效，这里提供两种更简洁的优化思路：

思路1：基于原生表格+伪元素的折叠布局（语义化优先） #

这种方案保留table标签的语义化优势，通过媒体查询调整布局，利用data-label属性和伪元素动态显示表头，完全不需要给行加类：

HTML结构（无需额外类） #

<table class="responsive-table">
  <thead>
    <tr>
      <th>姓名</th>
      <th>职位</th>
      <th>部门</th>
      <th>入职日期</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-label="姓名">张三</td>
      <td data-label="职位">前端开发工程师</td>
      <td data-label="部门">技术部</td>
      <td data-label="入职日期">2020-05-10</td>
    </tr>
    <tr>
      <td data-label="姓名">李四</td>
      <td data-label="职位">产品经理</td>
      <td data-label="部门">产品部</td>
      <td data-label="入职日期">2019-11-01</td>
    </tr>
  </tbody>
</table>

CSS实现 #

.responsive-table {
  width: 100%;
  border-collapse: collapse;
}

.responsive-table th,
.responsive-table td {
  padding: 12px;
  border: 1px solid #eee;
}

/* 小屏适配 */
@media (max-width: 768px) {
  /* 隐藏原生表头 */
  .responsive-table thead {
    display: none;
  }

  /* 每行变成独立卡片 */
  .responsive-table tbody tr {
    display: block;
    margin-bottom: 1.2rem;
    border: 1px solid #eee;
    border-radius: 4px;
  }

  /* 单元格转为块级，左侧显示表头标签 */
  .responsive-table tbody td {
    display: block;
    text-align: right;
    padding: 12px 12px 12px 50%;
    position: relative;
  }

  /* 利用data-label生成表头文本 */
  .responsive-table tbody td::before {
    content: attr(data-label);
    position: absolute;
    left: 0;
    top: 0;
    width: 50%;
    padding: 12px;
    background-color: #f8f9fa;
    font-weight: 600;
    text-align: left;
  }
}

思路2：保留Grid布局但取消行类依赖 #

如果想继续用Grid实现，可通过:nth-child匹配列位置来指定grid-area，无需给每行加类：

CSS核心代码 #

.responsive-table tbody {
  display: grid;
  gap: 1.2rem;
  padding: 1rem 0;
}

.responsive-table tbody tr {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-areas: "name position department hireDate";
}

/* 按列位置绑定grid-area */
.responsive-table tbody td:nth-child(1) { grid-area: name; }
.responsive-table tbody td:nth-child(2) { grid-area: position; }
.responsive-table tbody td:nth-child(3) { grid-area: department; }
.responsive-table tbody td:nth-child(4) { grid-area: hireDate; }

/* 小屏折叠为单列 */
@media (max-width: 768px) {
  .responsive-table tbody tr {
    grid-template-columns: 1fr;
    grid-template-areas: 
      "name"
      "position"
      "department"
      "hireDate";
  }

  /* 可选：添加表头标签 */
  .responsive-table tbody td::before {
    content: attr(data-label);
    font-weight: 600;
    margin-right: 0.5rem;
  }
}

方案优势 #

• 彻底摆脱行类的依赖，HTML结构更简洁，后期维护成本大幅降低
• 利用data-label动态绑定表头文本，避免CSS硬编码，扩展性更强
• 保留语义化标签，对SEO和无障碍访问更友好

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