How to make a table like this?

Question

css

From a regular monitor, the table is displayed as is, 6 cells. And when viewed from mobile ( media (max-width: 599px) )
It should be displayed 3 cells in a row.
example
From a regular monitor

From small screens

Please tell me how to make it up?

Answer 1

Допустим
codepen.io/aliencash/pen/oLygJE

Answer 2

Read here
There is an item Responsive Makes the table adaptive for different screen sizes.

Answer 3

codepen.io/smeecy/pen/wWXBRb , you can do it this way.

Answer 4

There are css grids for things like this. The most popular is part of the css framework bootstrap.
I advise you to connect it, you can not all, but only grid, then the task will be solved like this:

<div class="col-xs-4 col-md-2"></div>
<div class="col-xs-4 col-md-2"></div>
<div class="col-xs-4 col-md-2"></div>
<div class="col-xs-4 col-md-2"></div>
<div class="col-xs-4 col-md-2"></div>
<div class="col-xs-4 col-md-2"></div>

On small screens, the blocks will be 4/12 of the parent's width (3 in a row), on medium and larger screens they will be 2/12 (6 in a
row )
. In any case, I advise you to look at how it is implemented in getbootstrap.