Simulating rowspan on <table> with flexbox

by tracedecoy

HTML

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