如何用纯CSS将表头th内容复制到单元格td的data-label属性？

CSS是样式语言，无法直接修改DOM元素的属性（比如给<td>添加data-label），所以没法完全复刻你提供的jQuery代码的DOM操作逻辑，但可以通过以下两种纯前端方案实现类似的视觉效果：

方案一：手动添加data-label属性（无JS依赖） #

因为不能用JS自动生成data-label，我们可以直接在HTML里手动给每个<td>设置对应表头的data-label值，再用CSS控制显示：

HTML代码 #

<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>职业</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-label="姓名">张三</td>
      <td data-label="年龄">28</td>
      <td data-label="职业">工程师</td>
    </tr>
    <tr>
      <td data-label="姓名">李四</td>
      <td data-label="年龄">32</td>
      <td data-label="职业">设计师</td>
    </tr>
  </tbody>
</table>

CSS代码（以响应式表格为例） #

/* 基础表格样式 */
table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
}
th, td {
  padding: 0.8rem;
  border: 1px solid #eee;
}
th {
  background-color: #f5f5f5;
  text-align: left;
}

/* 移动端适配：显示data-label */
@media (max-width: 768px) {
  table, thead, tbody, tr, th, td {
    display: block;
  }
  thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }
  tr {
    margin-bottom: 1rem;
    border: 1px solid #ddd;
  }
  td {
    position: relative;
    padding-left: 50%;
    text-align: right;
  }
  td::before {
    content: attr(data-label);
    position: absolute;
    left: 0;
    width: 45%;
    padding-left: 0.8rem;
    font-weight: bold;
    text-align: left;
  }
}

方案二：无需data-label，纯CSS布局实现表头对应显示 #

利用CSS Grid布局，让表头和单元格自动对应，不需要额外属性：

HTML代码 #

<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>职业</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>28</td>
      <td>工程师</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>32</td>
      <td>设计师</td>
    </tr>
  </tbody>
</table>

CSS代码 #

table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
}
th, td {
  padding: 0.8rem;
  border: 1px solid #eee;
}
th {
  background-color: #f5f5f5;
}

/* 移动端用Grid实现表头与单元格对应 */
@media (max-width: 768px) {
  table {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
  thead {
    display: contents;
  }
  tbody {
    display: contents;
  }
  tr {
    display: contents;
  }
  th, td {
    display: flex;
    align-items: center;
    padding: 0.8rem;
  }
  th {
    justify-content: flex-end;
    font-weight: bold;
    border-right: none;
  }
  td {
    border-left: none;
  }
  /* 让每个表头对应同一列的单元格 */
  th:nth-child(1), td:nth-child(1) { grid-row: 1; }
  th:nth-child(2), td:nth-child(2) { grid-row: 2; }
  th:nth-child(3), td:nth-child(3) { grid-row: 3; }
  /* 多行数据时，调整行位置 */
  tbody tr:nth-child(2) th:nth-child(1),
  tbody tr:nth-child(2) td:nth-child(1) { grid-row: 4; }
  tbody tr:nth-child(2) th:nth-child(2),
  tbody tr:nth-child(2) td:nth-child(2) { grid-row: 5; }
  tbody tr:nth-child(2) th:nth-child(3),
  tbody tr:nth-child(2) td:nth-child(3) { grid-row: 6; }
}

这个方案不需要手动添加任何属性，完全靠CSS Grid的布局规则让表头和对应单元格在移动端上下排列，达到和data-label一样的效果。

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