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

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

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

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

9ca85dd38e4645e48eab25a89a7fb11f.png8a32a2c165ce4fbda09dd1a858ec6ae9.pngff47c47c0f94487f8bd786e63b6b3cf3.png
  • Вопрос задан
  • 21308 просмотров
Пригласить эксперта
Ответы на вопрос 7
Верстать действительно надо на блоках. Но меня больше волнует другой вопрос.. Пример информации которую разумно так представлять?

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

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

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

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

А по поводу отзывчивости табличных данных можно почитать здесь
Ответ написан
Комментировать
benny214
@benny214 Автор вопроса
¯\_(ツ)_/¯
все решил!
codepen.io/Benny214/pen/xDrij
Ответ написан
Комментировать
IonDen
@IonDen
JavaScript developer. IonDen.com
Не используйте таблицу саму по себе. Используйте вложенные блоки. В зависимости от ширины экрана прописывайте то одним то другим display: table /table-cell и будет вам радость.

www.senktec.com/2014/01/using-css-display-table-ce...
Ответ написан
zualex
@zualex
Senior Software Engineer
Вот есть репозиторий - это готовый шаблон для адаптивной верстки.
В примере можно увидеть адаптивную таблицу.
Ответ написан
Комментировать
@Serginhio
Я в сапоги заправляю клеша
Понимаю, что некропостинг, но может кому пригодится codepen.io/dudleystorey/pen/Geprd
или без явы - codepen.io/pixelchar/pen/rfuqK
Ответ написан
Комментировать
Использую bootstrap. тут и адаптивность и простота
Ответ написан
Комментировать
frontender.info/simple-responsive-table
https://habrahabr.ru/post/149742/
здесь есть примеры реализации адаптивной таблицы.
Мне понравился способ от Chris Coyier, но здесь есть один недостаток, если есть объединенные ячейки, то таблица строится неправильно.
Также использовал вариант со скроллбарами, но тут тоже есть минус, пользователи не видят скролл
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
SPIKS Санкт-Петербург
от 70 000 до 90 000 ₽
PERX Нижний Новгород
До 50 000 ₽
11 окт. 2024, в 15:27
10000 руб./за проект
11 окт. 2024, в 15:20
130000 руб./за проект
11 окт. 2024, в 15:18
5000 руб./за проект