Как так сверстать таблицу?

Question

[dev400]

С обычного монитора таблица отображается как есть, 6 ячеек. А при просмотре с мобильных ( media (max-width: 599px) )

Она должна отобразиться по 3 ячейки в ряд.

пример
С обычного монитора


С маленьких экранов


Подскажите пожалуйста, как такое сверстать?

Comments

[Алексей Струков]

Именно через тег table надо?

[dev400]

Алексей Струков: нет, просто я вижу это таблицей)

[dev400]

Алексей Струков: тк там потом будет цикл

[Алексей Струков]

dev400: тебе надо два дива, в которых будул лежать по три ячейки.
На десктопной ширине у них стоит ширина 50%, а на мобильной - 100%

Answer 1

[Андрей Федоров]

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

Answer 2

[Владислав Поляков]

Читайте тут
Там есть пункт Responsive Делает таблицу адаптивной под разный размер экрана.

Answer 3

[Smeecy Smeecy]

codepen.io/smeecy/pen/wWXBRb , можно таким способом.

Comments

[Андрей Федоров]

Толсто )))

[dev400]

Я наверно не совсем правильно написал в в опросе. То что на картинках это thead таблицы. Далее она циклом будет наполняться, и в мобильной версии thead разобьется на 2 части вместе с tbody

Answer 4

[Максим Тимофеев]

Для подобных вещей существуют css grid. Самая популярная входит в состав css framework bootstrap.
Советую подключить его, можно не весь, а только grid, тогда задача решится так:

<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>

На маленьких экранах блоки будут 4/12 ширины родителя (3 в ряд), на средних и больше 2/12 (6 в ряд)
Подробнее тут: getbootstrap.com/css/#grid

Ну или через медиа запросы самому написать себе грид. В любом случае советую глянуть как это реализовано в getbootstrap.

Comments

[Владислав Поляков]

Для этого придется подключать bootstrap , для автора это может быть не нужно . Есть стандартные методы в css.

[Максим Тимофеев]

Владислав Поляков: 1. Можно эти методы подсмотреть у bootstrap. 2. Можно подключить только grid system, что на мой взгляд быстрее чем писать самому.

[Владислав Поляков]

Максим Тимофеев: Проще использовать flexbox , система разметки бутстрап давно устарела .

[Максим Тимофеев]

Владислав Поляков: Она не устарела, мало того 4-я версия будет использовать flexbox. За flexbox будущее, но это не отменяет css framework-ов, которые его используют.