如何为HTML表格分组后的<tr>元素设置CSS inline-flex属性

你当前的单表格结构无法直接给两组列对应的行单独设置转置样式，得先调整HTML结构——把原表格拆成两个独立表格，分别对应前两列和后两列，之后就能给每个表格的行设置inline-flex + flex-direction: column的转置效果了。

步骤1：调整HTML结构 #

将原表格拆分为两个独立表格，用容器包裹实现并排显示：

<div class="table-container">
  <!-- 第一组：前两列 -->
  <table class="table-group">
    <tr>
      <td>Team</td>
      <td>Region</td>
    </tr>
    <tr>
      <td>Red Sox</td>
      <td>AL East</td>
    </tr>
  </table>

  <!-- 第二组：后两列 -->
  <table class="table-group">
    <tr>
      <td>Type</td>
      <td>Game</td>
    </tr>
    <tr>
      <td>MLB</td>
      <td>Baseball</td>
    </tr>
  </table>
</div>

步骤2：编写对应CSS #

给容器设置flex布局让两个表格并排，再给每组表格的行设置转置样式，同时保留你原有的边框样式：

/* 容器控制两组表格并排 */
.table-container {
  display: flex;
  gap: 20px; /* 可选：设置两组表格的间距 */
}

/* 每组表格的基础样式 */
.table-group {
  border-collapse: collapse;
}

/* 给每组的行设置转置效果 */
.table-group tr {
  display: inline-flex;
  flex-direction: column;
}

/* 第一组表格的单元格样式 */
.table-group:first-child td {
  width: 120px; /* 可按需调整宽度 */
  border: 1px solid black;
  padding: 8px;
}

/* 第二组表格的单元格样式 */
.table-group:last-child td {
  width: 120px; /* 可按需调整宽度 */
  border: 3px solid blue;
  padding: 8px;
}

效果说明 #

调整后，每组表格的行都会呈现纵向排列的转置效果，同时保留了你原本设置的两组列边框样式，且两组表格会并排展示，和你最初的分组逻辑一致。

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