How can I create a responsive table?
The table I want is similar to this one:
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!