Simulieren von "rowspan" auf <table> mit Flexbox - css, html-table, flexbox

Ich versuche zu simulieren rowspan auf meinem <table>verwenden flexbox.

Grund warum ich benutze flexboxund nicht nur ein normaler table, ist für js-sorting Gründe. In jeder "Auflistung" (<tr>), Ich muss mehrere simulieren <tr>"s.

Das ist das, was ich benötige:

Das habe ich ausprobiert:

<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;
}

JFiddle

Ich kann mich nicht raussehen. Ist das nicht möglich?

Antworten:

Dies ist mit flexbox nicht möglich (praktisch bis display:contents erhält mehr Unterstützung), es sei denn, Sie ändern den HTML-Code und umbrechen die Spalten. CSS-Grid kann das aber tun.

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>