Задать вопрос
benny214
@benny214
¯\_(ツ)_/¯
html

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

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

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

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

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

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

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

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

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

А по поводу отзывчивости табличных данных можно почитать здесь
Ответ написан
Комментировать
Комментировать
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...
Ответ написан
1 комментарий
1 комментарий
zualex
@zualex
Senior Software Engineer
Вот есть репозиторий - это готовый шаблон для адаптивной верстки.
В примере можно увидеть адаптивную таблицу.
Ответ написан
Комментировать
Комментировать
@Serginhio
Я в сапоги заправляю клеша
Понимаю, что некропостинг, но может кому пригодится codepen.io/dudleystorey/pen/Geprd
или без явы - codepen.io/pixelchar/pen/rfuqK
Ответ написан
Комментировать
Комментировать
kanonir1886
@kanonir1886
Использую bootstrap. тут и адаптивность и простота
Ответ написан
Комментировать
Комментировать
@Chrissik
frontender.info/simple-responsive-table
https://habrahabr.ru/post/149742/
здесь есть примеры реализации адаптивной таблицы.
Мне понравился способ от Chris Coyier, но здесь есть один недостаток, если есть объединенные ячейки, то таблица строится неправильно.
Также использовал вариант со скроллбарами, но тут тоже есть минус, пользователи не видят скролл
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Тестировщик-стажёр
ITooLabs • Тула
от 35 000 до 40 000 ₽
Fullstack PHP Developer
Smapse Education
от 40 000 до 65 000 ₽
Trainee - IT Support
move2usajobs.com LLC • Лос-Анджелес
от 2 000 до 4 000 $
Ещё вакансии
Заказы с Хабр Фриланса
Редизайн корзины аспро. Верстка
23 апр. 2024, в 22:07
12000 руб./за проект
Собрать семантическое ядро + ТЗ копирайтеру для крупного сайта
23 апр. 2024, в 21:40
20000 руб./за проект
Реализовать редирект запросов в Chrome Extension Manifest v3
23 апр. 2024, в 21:14
1000 руб./за проект
Ещё заказы