如何通过CSS在内容将换行时修改flex-direction实现表格转置？

针对动态生成的表格，要实现“内容即将溢出时自动整体转置”且不依赖JavaScript、不用固定宽度媒体查询的需求，可以通过CSS容器查询结合Flex布局来实现，以下是具体方案：

步骤1：调整HTML结构 #

给表格包裹一个容器，用于触发容器查询：

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="test.css">
</head>
<body>
<div class="table-container">
  <table>
  <tbody>
  <tr><th>table</th><td>attribute 1</td><td>attribute 2</td><td>attribute 3</td><td>attribute 4</td><td>attribute 5</td><td>attribute 6</td></tr>
  <tr><th>one</th><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td></tr>
  <tr><th>two</th><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td></tr>
  <tr><th>three</th><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td></tr>
  </tbody>
  </table>
</div>
</body>
</html>

步骤2：编写CSS样式 #

利用容器查询替代固定宽度的媒体查询，基于表格容器的实际宽度触发转置：

/* 表格容器：启用容器查询，设置溢出备用 */
.table-container {
  container-type: inline-size;
  overflow-x: auto;
  width: 100%;
}

/* 默认状态：表格正常横向布局 */
tbody {
  display: flex;
  flex-direction: column;
  text-align: center;
}

tr {
  display: flex;
  flex-direction: row;
}

th, td {
  width: 10rem;
  padding: 0.5rem;
  border: 1px solid #ddd;
  box-sizing: border-box;
}

/* 触发条件：容器宽度小于表格最小内容宽度时转置 */
@container (max-width: min-content) {
  tbody {
    flex-direction: row;
  }

  tr {
    flex-direction: column;
  }

  th, td {
    width: auto;
    text-align: left;
  }
}

方案说明 #

1. 容器查询的优势：container-type: inline-size让CSS能感知表格容器的实际宽度，而非固定的视口宽度，完美适配动态生成、宽度不确定的表格，彻底摆脱“魔法宽度”的媒体查询。
2. 转置逻辑：通过切换tbody和tr的flex-direction，将原本的行-列结构反转成列-行结构，实现完整的表格转置，而非单个单元格换行。
3. 兼容性：容器查询已支持Chrome 105+、Firefox 110+、Safari 16+等现代浏览器，如需兼容旧版浏览器，可添加基于视口宽度的媒体查询作为回退，但核心自适应逻辑仍由容器查询实现。

为什么flex-wrap无法满足需求 #

flex-wrap: wrap仅能让单元格在空间不足时换行，但无法改变表格的行列层级结构，只能实现零散的单元格换行，无法达到整体转置的效果，因此需要通过切换flex方向来实现完整的结构反转。

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