Search code examples
cssflexboxresponsive

Create responsive table using flexbox

How can I create a responsive table?

The table I want is similar to this one:

enter image description here

The table must be responsive, so what have to change is the width of the columns.

I think the best solution is to use Flexbox but how?

I try this code:

.container {
  display: flex;
  border: 1px solid black;
}

.column {
  display: flex;
  flex-direction: column;
  border: 1px solid black;
}

.cell {
  border: 1px solid black;
  padding: 5px;
}
<div class="container">
  <div class="column">
    <div class="cell"></div> <!-- empty cell -->
    <div class="cell">something</div>
    <div class="cell">dog</div>
    <div class="cell">more dogs</div>
  </div>

  <div class="column">
    <div class="cell">column2 long title</div>
    <div class="cell">abc</div>
    <div class="cell">a</div>
    <div class="cell">aaaaaaa</div>
  </div>

  <div class="column">
    <div class="cell">column 3 tilew</div>
    <div class="cell">bbbb</div>
    <div class="cell">da</div>
    <div class="cell">f</div>
  </div>

  <div class="column">
    <div class="cell">something</div>
    <div class="cell">ggggg</div>
    <div class="cell">f</div>
    <div class="cell">cats</div>
  </div>
</div>

I simply create 4 columns, and each column has the same number of row but, of course, they will not be of the same height. How can I fix it?

Then, the first cell must be empty

Thanks a lot!

Solution

  • I don't see why you need to use flexbox rather than a table. Anyway you can use CSS Grid layout here just for the sake of not using tables - it is easy to set up for the code in the question.

    Also using display: contents here - note that it is supported in newer browsers - full support explanation here.

    .container {
  display: grid; /* grid containers */
  grid-template-columns: repeat(4, 1fr); /* four columns */
  grid-template-rows: repeat(4, 1fr); /* four rows */
  grid-auto-flow: column; /* in column direction */
  border: 1px solid black;
}

.column {
  display: contents; /* the child elements would be grid items */
  border: 1px solid black;
}

.cell {
  border: 1px solid black;
  padding: 5px;
}
    <div class="container">
  <div class="column">
    <div class="cell"></div> <!-- empty cell -->
    <div class="cell">something</div>
    <div class="cell">dog</div>
    <div class="cell">more dogs</div>
  </div>

  <div class="column">
    <div class="cell">column2 long title</div>
    <div class="cell">abc</div>
    <div class="cell">a</div>
    <div class="cell">aaaaaaa</div>
  </div>

  <div class="column">
    <div class="cell">column 3 tilew</div>
    <div class="cell">bbbb</div>
    <div class="cell">da</div>
    <div class="cell">f</div>
  </div>

  <div class="column">
    <div class="cell">something</div>
    <div class="cell">ggggg</div>
    <div class="cell">f</div>
    <div class="cell">cats</div>
  </div>
</div>