0

I'm trying to simulate rowspan on my <table>, using flexbox.

Reason why I'm using flexbox, and not just a regular table, is for js-sorting reasons. In each "listing" (<tr>), I need to simulate multiple <tr>'s.

This is what I need:

enter image description here

This is what I have tried:

<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

I can't see my way out of it. Is this not possible?

Trace DeCoy
  • 649
  • 6
  • 16

1 Answers1

2

This is not possible with flexbox (in practical terms until display:contents gains more support ) unless you change the HTML and wrap the columns. CSS-Grid can do that though.

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>
Paulie_D
  • 107,962
  • 13
  • 142
  • 161
  • Awesome, Pauli, thanks. I _was_ thinking I probably had to use Grid, but was hoping flexbox would be able to handle it. If that's not possible, then that's how it is. Thanks for your efforts. – Trace DeCoy Mar 14 '18 at 16:02