如何用Flexbox实现HTML表格中td的rowspan="2"效果

我正在尝试用Flexbox的div替代HTML表格，大部分布局已实现，但无法模拟td的rowspan="2"效果。原HTML表格及对应CSS代码如下：

#divMain table {
  width: 100%;
  table-layout: fixed;
  border: 1px solid black;
}

#divMain table tr {
  height: 100px;
}

#divMain table td {
  vertical-align: top;
  border: 1px solid black;
  background: yellow;
}

<div id="divMain">
  <table>
    <tr>
      <td>blah</td>
      <td>blah</td>
      <td>blah</td>
    </tr>
    <tr>
      <td rowspan="2">blah</td>
      <td>blah</td>
      <td>blah</td>
    </tr>
    <tr>
      <td>blah</td>
      <td>blah</td>
    </tr>
  </table>
</div>

我目前写的Flexbox结构及CSS代码如下：

.table {
  display: flex;
  flex-flow: column nowrap;
  border: 1px solid black;
}

.row {
  display: flex;
}

.cell {
  height: 100px;
  vertical-align: top;
  border: 1px solid black;
  background: yellow;
  display: flex;
  flex: 1;
  justify-content: left;
  align-items: top;
}

<div class="table">
  <div class="row">
    <div class="cell">blah</div>
    <div class="cell">blah</div>
    <div class="cell">blah</div>
  </div>
  <div class="row">
    <div class="cell">blah</div>
    <div class="cell">blah</div>
    <div class="cell">blah</div>
  </div>
  <div class="row">
    <div class="cell">blah</div>
    <div class="cell">blah</div>
    <div class="cell">blah</div>
  </div>
</div>

解决方案 #

要实现类似rowspan="2"的垂直跨单元格效果，需要调整Flexbox的嵌套结构：将跨两行的单元格放在一个垂直方向的Flex容器中，同时把对应的两行右侧单元格整合到一个水平容器里，让它们和跨行列单元格处于同一层级的Flex布局中。

修改后的代码如下：

CSS代码

.table {
  display: flex;
  flex-flow: column nowrap;
  border: 1px solid black;
}

.row {
  display: flex;
}

.cell {
  height: 100px;
  vertical-align: top;
  border: 1px solid black;
  background: yellow;
  display: flex;
  flex: 1;
  justify-content: left;
  align-items: flex-start;
}

/* 垂直跨两行的容器 */
.cell-rowspan-2 {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.cell-rowspan-2 .cell {
  height: auto;
  flex: 1;
  border-bottom: none;
}
.cell-rowspan-2 .cell:last-child {
  border-bottom: 1px solid black;
}

/* 整合两行右侧单元格的容器 */
.row-group {
  display: flex;
  flex-direction: column;
  flex: 2;
}
.row-group .row {
  flex: 1;
}

HTML代码

<div class="table">
  <div class="row">
    <div class="cell">blah</div>
    <div class="cell">blah</div>
    <div class="cell">blah</div>
  </div>
  <!-- 调整第二、第三行的结构 -->
  <div class="row">
    <!-- 跨两行的单元格容器 -->
    <div class="cell-rowspan-2">
      <div class="cell">blah</div>
    </div>
    <!-- 右侧两行单元格的整合容器 -->
    <div class="row-group">
      <div class="row">
        <div class="cell">blah</div>
        <div class="cell">blah</div>
      </div>
      <div class="row">
        <div class="cell">blah</div>
        <div class="cell">blah</div>
      </div>
    </div>
  </div>
</div>

这样就能实现和HTML表格中rowspan="2"完全一致的布局效果，跨行列的单元格会垂直占据两行的高度，右侧单元格则保持正常的两行排列。

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