Адаптивный табличный макет

Адаптивный табличный макет

От автора: меня раздражает, что очень часто таблицы плохо оптимизированы под мобильные устройства. К примеру, я на википедии со своего iPhone просматриваю список серий сериала Звёздный путь: Следующее поколение (да, я вырос в поздних 80-х), а в таблице очень много колонок и информации. И мне приходится долго листать назад и вперед, переворачивать телефон. Все это сильно раздражает.

Это довольно распространенная проблема, хотя в сети есть несколько решений с адаптивными таблицами. В том числе и шаблон на чистом CSS.

Так что мешает воспользоваться этим или другим шаблоном? Время? Силы? Как насчет быстро пробежаться по этим шаблонам?

С чего начать?

Создадим такую же таблицу, как сверху, при помощи простого HTML:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

У нашей таблицы 4 колонки. Давайте пропишем немного стилей:

Таблица точно такая же, как и другие HTML таблицы, с которыми вы работали. И теперь вы можете задаться вопросом: «Как сделать ее адаптивной?».

Добавляем адаптивность!

Сперва мы добавим атрибут data-label ко всем ячейкам таблицы со значением имени соответствующей колонки. Это нам пригодится для лейблов.

Теперь можно начать писать медиа запросы:

На маленьких экранах элементы tr и td будут отображаться в виде блоковых элементов, а не как строки и ячейки таблицы. А псевдокласс :before выполняет роль лейбла. Вот наша таблица (переверните свое устройство):

Это все?

Да, в значительной степени. По крайней мере, для этого примера. Не забывайте, что это только один пример адаптивного табличного макета с относительно простыми данными. У вас будет уже свой макет с более сложными данными. Все может отличаться. Всегда рассматривайте все варианты для лучшего пользовательского опыта.

Источник: http://allthingssmitty.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Фреймворк Bootstrap - верстаем адаптивно, просто, быстро!

Получите видеокурс по основам Bootstrap

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree