CODEWITHSUNDEEP
csshtml-tableflexbox
Trace DeCoy
Trace DeCoy

Reputation: 659

Simulating "rowspan" on <table> using Flexbox

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?

Upvotes: 0

Views: 815

Answers (1)

Paulie_D
Paulie_D

Reputation: 115010

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>

Upvotes: 2

Related Questions