Как сделать адаптивную таблицу с переносом колонок в моб версии?

Question

[Валентин Мельник]

Подскажите, пожалуйста, как сделать такую таблицу
На комп версии

На планшете

На мобильном

Делать, я так понимаю, нужно через div, но может кто уже сталкивался чтобы сделать оптимально.
Думал первый столбец делать возле каждого последующего, но скрывать везде кроме второго, а потом через медиазапросы показывать на необходимых разрешениях. Или есть лучше решение, чтобы бекендер потом не проклинал?

Comments

[Максим]

а если делать не таблицей ? а к примеру параграфами в блочном элементе ... то есть замаскировать просто

[poniyur]

Вариантов на самом деле много, вот например такой

item1
item2
item3

.my-flex-container{
display: flex;
flex-wrap: wrap;
}

[Валентин Мельник]

poniyur, Так и делаю. Просто первый столбец смущает. Я его добавил слева к третьему, четветому и пятому. На ПК версии скрыл. На планшете показал возле третьего столбца скрытый, а на телефоне все скрытые показал. Но думал может какой-то более элегантный способ есть.

[poniyur]

Валентин Мельник, я ничего не понял, сорян

Answer 1

[Александр Рыбаков]

Html:

<div class="flex-box">
  <div class="col1"><!--Содержание первой колонки(Страховая компания и регион)--></div>
  <div class="col2"><!--тут второй столбец--></div>
  <div class="col1"><!--Содержание первой колонки(Страховая компания и регион)--></div>
  <div class="col2"><!--тут третий столбец--></div>
  <div class="col1"><!--Содержание первой колонки(Страховая компания и регион)--></div>
  <div class="col2"><!--тут четвертый столбец--></div>
  <div class="col1"><!--Содержание первой колонки(Страховая компания и регион)--></div>
  <div class="col2"><!--тут пятый столбец--></div>
</div>

Css:

.flex-box{
  display: flex;
  flex-wrap: wrap; 
}
.flex-box div:nth-child(2n+1){
  display: none; /*прячем 3 блока с названиями*/
}
@media screen and (max-width:/*тут ширина страницы под планшеты(Пиксели на котором пройдет первый перенос)*/){
  /*стили для планшетной версии*/
  /*ширину для .col1 и .col2*/
  /*ширину для таблицы*/
  .flex-box div:nth-child(4n+1){
    display: none; /*прячем два блока с названиями*/
  }
}
@media screen and (max-width:/*тут ширина страницы под мобилки(Пиксели на котором пройдет второй перенос)*/){
  /*стили для мобильной версии*/
  /*ширину для .col1 и .col2*/
  .flex-box div:nth-child(2n+1){
    display:  block; /*показываем все блоки с названиями*/
  }
}


примерно так:)
Если помог — отметьте решением!

Comments

[Валентин Мельник]

Спасибо. Сделал примерно также.