Symulowanie "rowspan" na <table> przy użyciu Flexbox - css, html-table, flexbox

Próbuję symulować rowspan na moim <table>, za pomocą flexbox.

Powód, dla którego używam flexbox, a nie tylko zwykły table, jest z powodów js-sortowania. W każdym "wykazie" (<tr>), Muszę zasymulować wiele <tr>"s.

To jest to, czego potrzebuję:

Oto, co próbowałem:

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

Jsfiddle

Nie widzę wyjścia z tego. Czy to nie jest możliwe?

Odpowiedzi:

Nie jest to możliwe w przypadku flexbox (w praktyce do display:contents zyskuje więcej wsparcia), chyba że zmienisz HTML i zawiniesz kolumny. CSS-Grid może to zrobić.

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>