Делаем адаптивную таблицу на CSS

adaptive table

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

Это проблема широко распространена в вэбе несмотря на то, что есть  несколько вариантов отзывчивых таблиц, в том числе такой просто с помощью CSS:

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

 

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

Мы создадим такую же таблицу на обычном HTML как выше в примере:

 

Наша Таблица состоит из четырех столбцов. Давайте добавим немного  CSS  стилей:

Это  похоже на многие HTML-таблицы, с которыми вы работали ранее. И, наверное, сейчас вы думаете, так как же мне сделать таблицу резиновой?

 

Сделаем таблицу адаптивной

Сначала, добавим атрибут  aria-label  для каждой ячейки данных с именем столбца.  Которые будут использоваться в качестве маркировки в отзывчивом макете. Использование aria-label  также обеспечивает поддержку  для чтения с экрана.

 

 

Теперь напишем несколько медиа-запросов

 

 

В маленькой области видимости  <tr>  и  <tr>  элементы будут отображаться на блочном уровне, а не как табличные строки и ячейки. А псевдоэлемент :before теперь служит в качестве label.

Вот наша таблица (Попробуйте сузить экран вашего устройства).

 

See the Pen qargXL by Ruslan (@rkaliev) on CodePen.0

 

И это все?  😳

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

 

 

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