如何不修改HTML结构用CSS实现TD单元格位于TH单元格正下方？

原始HTML代码 #

<table>
  <tbody>
    <tr>
      <th>Header 1</th>
      <td>Data 1</td>
      <th>Header 2</th>
      <td>Data 2</td>
    </tr>
    <tr>
      <th>Header 3</th>
      <td>Data 3</td>
      <th>Header 4</th>
      <td>Data 4</td>
      <th>Header 5</th>
      <td>Data 5</td>
    </tr>
  </tbody>
</table>

期望呈现样式 #

Header 1   Header 2         
 Data 1     Data 2   
 Header 3   Header 4   Header 5 
 Data 3     Data 4     Data 5

解答 #

完全可以做到，不用修改HTML结构，仅靠CSS就能实现这个布局。核心是利用CSS Grid重新排列<tr>内部的元素，把同一行里的所有表头<th>放在顶部一行，对应的<td>放在下方一行。

具体CSS代码如下：

table {
  border-collapse: collapse;
  width: auto; /* 让表格宽度自适应内容 */
}

tr {
  display: grid;
  /* 根据表头数量自动生成列，每列最小宽度可按需调整 */
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  margin-bottom: 0.8rem; /* 控制行与行之间的间距 */
}

th {
  grid-row: 1; /* 所有表头统一放在第一行 */
  text-align: left;
}

td {
  grid-row: 2; /* 所有数据单元格统一放在第二行 */
  text-align: left;
}

这段代码会让每个<tr>渲染成两行结构：第一行展示该行内所有的表头，第二行对应展示数据单元格，完全匹配你想要的布局效果。

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