Как адаптировать таблицу для мобильного?

Question

[valya1988]

@media screen and (max-width: 800px) {
  table.delivery thead {
    display: none;
  }

Comments

[Ankhena]

Хоть бы картинку приложили как есть и как должно быть. Не говоря уж про код в песочнице jsfiddle.net или codepen.io

Answer 1

[MeowingMaster]

можешь использовать css-grid (но думаю есть варианты и получше)

Answer 2

[Dima Polos]

https://www.smashingmagazine.com/2019/01/table-des...

Answer 3

[lamer350]

Все зависит от сложности таблицы, иногда просто добавляете горизонтальный скрол чтобы ее можно было просто влево/вправо.

Answer 4

[dom1n1k]

Универсального рецепта тут нет. Многое зависит от сложности структуры таблицы.
Если таблица очень навороченная, то лучше вообще оставить идею с адаптацией, а просто делать для мобилы и десктопа 2 отдельных лейаута.
Если таблица более-менее простая, то применяю сочетание двух техник:
1. Сначала скрываю столбцы с второстепенной инфой.
2. Потом транспонирование - строки выстраиваются в столбик, а подписи к ним работают через before/attr(). В общих чертах этот принцип показан тут: https://stackoverflow.com/questions/32301206/how-t...