使用Flexbox模拟“rowspan”

Question

我正在尝试使用rowspan在<table>上模拟flexbox。

我使用flexbox的原因，而不是只是一个常规的table，是出于js排序的原因。在每个“列表”（<tr>）中，我需要模拟多个<tr>。

这就是我需要的：

{{3} }

这就是我的尝试：

<table>
  <tr>
    <td class="a"></td>
    <td class="b"></td>
    <td class="c"></td>
    <td class="d"></td>
    <td class="e"></td>
  </tr>
</table>

CSS：

table {
    width: 100%;
}

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

  height: 200px;
}

.a {
  flex: 0 0 25%;
  background: green;
}

.b {
  flex: 0 0 25%;
  background: blue;}

.c {
  flex: 0 0 25%;
  background: red;
}

.d {
  flex: 0 0 25%;
  background: yellow;
    height: 100%;
}

.e {
  flex: 0 0 75%;
  background: gray;
}

我看不出自己的出路。这不可能吗？

Answer 1

除非您更改HTML并包装列，否则无法使用flexbox（实际上除非display:contents获得更多支持）。但CSS-Grid可以做到这一点。

table {
  width: 100%;
}

tr {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  height: 200px;
}

.a {
  grid-row: 1;
  background: green;
}

.b {
  grid-row: 1;
  background: blue;
}

.c {
  grid-row: 1;
  background: red;
}

.d {
  background: yellow;
  grid-row: 1 / 3;
}

.e {
  grid-column: 1 / span 3;
  background: gray;
}

<table>
  <tr>
    <td class="a"></td>
    <td class="b"></td>
    <td class="c"></td>
    <td class="d"></td>
    <td class="e"></td>
  </tr>
</table>