Как сделать таблицы адаптивными с CSS

Как сделать таблицы адаптивными с CSS

От автора: я считаю, что необходимость создавать адаптивные макеты таблиц возникает гораздо чаще, чем ожидают большинство разработчиков. Часто реакцией на это является желание реализовать какую-то собственную систему координатной сетки или использовать предустановленную библиотеку. Не делайте этого – вы можете сделать таблицы адаптивными с помощью простого CSS.

Моя недавняя статья на HackerNews Пишите HTML, как будто сейчас 1999 год, получила намного больше внимания, чем я ожидал. Последовало несколько комментариев, в которых говорилось о том, что элементы table не очень хорошо работают с мобильными устройствами или о невозможности использования удобного макета на небольших экранах. Это просто неправда.

Ниже приведены две отдельные демо-версии, показывающие, как оптимизировать HTML table для мобильных устройств, используя только минимальное количество CSS. Эти реализации могут быть неидеальными, но они намного лучше реализации множества пользовательских элементов div в виде таблиц.

Демо 1: Просто позвольте им прокручиваться

Хорошо, я признаю, что эта реализация не самая лучшая, но я считаю, что она хорошо работает с огромными наборами данных. Просто установите min-width для родительского элемента table, и браузер просто потребует от пользователя прокручивать содержимое по горизонтали.

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

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

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

Посмотрите CodePen ниже, чтобы увидеть ее в действии:

Я на самом деле предпочитаю этот метод из-за его простоты и функциональности. Пользователи на мобильных устройствах знакомы с прокруткой, поскольку это одно из основных необходимых действий. «Обрезка» таблицы дает им мгновенный визуальный сигнал, что они могут прокручивать контент.

Демо 2: Более гибкая, чем вы думаете

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

Посмотрите демонстрацию на CodePen:

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

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

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

Есть некоторые предостережения, относящиеся к этому подходу:

В настоящее время мы скрываем строку thead в мобильном представлении (только визуально — программы чтения с экрана все еще могут сканировать ее)

Может потребоваться дополнительная работа в зависимости от того, сколько элементов в строке flexbox имеет смысл размещать (на основе проекта и набора данных)

Вы можете сохранить заголовки таблиц и стилизовать их так же, как содержимое tbody, но я считаю, что скрывать их — это более чистый подход. Этот выбор полностью зависит от ваших личных предпочтений. Вы также можете добавить элементы span заголовков внутри основных элементов tbody следующим образом:

Обновление: как указал пользователь mmoez, гораздо чище будет использовать псевдо-селекторы :nth-child для реализации полей заголовков на мобильных устройствах.

Почему я должен обращать внимание на использование элементов table?

Если в двух словах: доступность и правильная семантика. Зачем использовать отвертку, когда вам нужен молоток? Конечно, вы можете заставить эту отвертку выглядеть и работать почти так же, как молоток, но с какой целью? Просто используйте молоток. Получайте удовольствие, делая свои таблицы адаптивными!

Автор: Bradley Taunt

Источник: https://bradleytaunt.com

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

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

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

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

PSD to HTML

Практика верстки сайта на CSS Grid с нуля

Смотреть

Метки:

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

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

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

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