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

Question

[Виктор Туманов]

Сверстать, не используя JS адаптивную таблицу, как на скриншотах, для трех размеров экрана: 0-600, 601-1024, 1025-...
Для самых больших экранов текст в ячейке должен выравниваться по вертикали, для меньших - не обязательно.

Используя jQuery сделать так, чтобы на среднем экране текст также выравнивался по вертикали.

Собственно застрял на втором разрешении:
codepen.io/Benny214/pen/xDrij

Answer 1

[Alexander Sydorenko]

Верстать действительно надо на блоках. Но меня больше волнует другой вопрос.. Пример информации которую разумно так представлять?

Представим возможные данные:
Фамилия Имя Отчество Адрес

Два столбца
Фамилия Имя
Отчество Адрес

Один
Фамилия
Имя
Отчество
Адрес

ИМХО строка таблицы это логически завершенная сущность. Целостная и неделимая..

А по поводу отзывчивости табличных данных можно почитать здесь

Answer 2

[Виктор Туманов]

все решил!
codepen.io/Benny214/pen/xDrij

Answer 3

[Денис Инешин]

Не используйте таблицу саму по себе. Используйте вложенные блоки. В зависимости от ширины экрана прописывайте то одним то другим display: table /table-cell и будет вам радость.

www.senktec.com/2014/01/using-css-display-table-ce...

Comments

[Виктор Туманов]

я не очень понимаю, как объединить первую и третью ячейку, и вторую и четвёртую.

Answer 4

[Александр Зубарев]

Вот есть репозиторий - это готовый шаблон для адаптивной верстки.
В примере можно увидеть адаптивную таблицу.

Answer 5

[Сергей Яковлев]

Понимаю, что некропостинг, но может кому пригодится codepen.io/dudleystorey/pen/Geprd
или без явы - codepen.io/pixelchar/pen/rfuqK

Answer 6

[Дмитрий Гормаш]

Использую bootstrap. тут и адаптивность и простота

Answer 7

[Илья Морунов]

frontender.info/simple-responsive-table
https://habrahabr.ru/post/149742/
здесь есть примеры реализации адаптивной таблицы.
Мне понравился способ от Chris Coyier, но здесь есть один недостаток, если есть объединенные ячейки, то таблица строится неправильно.
Также использовал вариант со скроллбарами, но тут тоже есть минус, пользователи не видят скролл