如何用纯CSS实现小屏幕下HTML表格的列拆分展示？

问题描述 #

我有如下结构的HTML <table>：

-------------------------
| Col 1 | Col 2 | Col 3 |
-------------------------
| Foo A | Bar A | Buzz A|
|-------|-------|-------|
| Foo B | Bar B | Buzz B|
-------------------------

为实现响应式效果，在小屏幕上需将其拆分为独立列展示，效果如下：

---------
| Col 1 |
---------
| Foo A |
| ----- |
| Foo B |
------------------
| Col 2 |
---------
| Bar A |
| ----- |
| Bar B |
------------------
| Col 3 |
---------
| Buzz A|
|-------|
| Buzz B |
---------

请问是否有纯CSS技巧可实现这种列拆分效果？还是必须使用JS，或是硬编码两种表格版本并通过CSS控制显示？

注：已有类似问题采用设置表格单元格为display:block;的方案，但该方案会打乱本场景下的顺序。

纯CSS实现方案 #

不需要JS或重复编写两份表格结构，通过CSS Grid或Flexbox即可实现按列分组的响应式效果，以下是两种可行方案：

方案1：CSS Grid重排布局 #

核心是将表格元素转为Grid容器，通过grid-row和grid-column属性重新规划元素位置，让同一列的表头与数据单元格聚合。

假设你的标准HTML表格结构如下：

<table>
  <thead>
    <tr>
      <th>Col 1</th>
      <th>Col 2</th>
      <th>Col 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Foo A</td>
      <td>Bar A</td>
      <td>Buzz A</td>
    </tr>
    <tr>
      <td>Foo B</td>
      <td>Bar B</td>
      <td>Buzz B</td>
    </tr>
  </tbody>
</table>

对应的响应式CSS代码：

/* 大屏幕保持默认表格样式 */
table {
  width: 100%;
  border-collapse: collapse;
}
th, td {
  border: 1px solid #000;
  padding: 8px;
  text-align: center;
}

/* 小屏幕切换为Grid布局 */
@media (max-width: 768px) {
  table, thead, tbody, tr, th, td {
    display: grid;
  }

  /* 表头作为列标题，单独占一行 */
  th {
    grid-column: 1;
    margin-top: 16px;
    background-color: #f0f0f0;
  }

  /* 第一列数据单元格：跟随第一个表头排列 */
  tbody tr td:first-child {
    grid-row: 2 / span 2;
    grid-column: 1;
  }

  /* 第二列数据单元格：跟随第二个表头排列 */
  tbody tr td:nth-child(2) {
    grid-row: 4 / span 2;
    grid-column: 1;
  }

  /* 第三列数据单元格：跟随第三个表头排列 */
  tbody tr td:nth-child(3) {
    grid-row: 6 / span 2;
    grid-column: 1;
  }
}

方案2：Flexbox配合order属性 #

通过Flex容器调整元素的order值，让同一列的表头和数据单元格按顺序聚合。

CSS代码示例：

/* 大屏幕保持默认表格样式 */
table {
  width: 100%;
  border-collapse: collapse;
}
th, td {
  border: 1px solid #000;
  padding: 8px;
  text-align: center;
}

/* 小屏幕切换为Flex布局 */
@media (max-width: 768px) {
  table {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  thead tr, tbody tr {
    display: flex;
    flex-direction: column;
  }

  /* 通过order值控制同一列元素聚合 */
  th:nth-child(1), td:nth-child(1) {
    order: 1;
  }
  th:nth-child(2), td:nth-child(2) {
    order: 2;
  }
  th:nth-child(3), td:nth-child(3) {
    order: 3;
  }

  /* 给表头添加分隔样式 */
  th {
    border-bottom: 2px solid #000;
    margin-bottom: 8px;
  }
}

注意事项 #

• 两种方案均无需修改原有HTML结构，纯CSS即可实现按列分组的响应式效果，不会打乱内容顺序。
• 若表格列数较多，可结合CSS变量或预处理器（如Sass/Less）的循环语法简化代码，避免重复编写多个nth-child选择器。

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