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

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

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

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

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

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

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

table { min-width: 800px; /* Установите здесь нужный min-width */
}

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

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

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

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

/* Используем 800px для мобильного экрана */
@media(max-width: 800px) { /* Скрываем заголовки таблицы */ table thead { left: -9999px; position: absolute; visibility: hidden; } table tr { border-bottom: 0; display: flex; flex-direction: row; flex-wrap: wrap; margin-bottom: 40px; } table td { border: 1px solid; margin: 0 -1px -1px 0; /* Удаляем двойную границу */ width: 50%; }
}

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

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

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

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

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

/* Стили span по умолчанию - скрыты на настольных устройствах */
table td span { background: #eee; color: dimgrey; display: none; font-size: 10px; font-weight: bold; padding: 5px; position: absolute; text-transform: uppercase; top: 0; left: 0;
} /* Простой CSS для flexbox-таблиц на мобильных устройствах */
@media(max-width: 800px) { table thead { left: -9999px; position: absolute; visibility: hidden; } table tr { border-bottom: 0; display: flex; flex-direction: row; flex-wrap: wrap; margin-bottom: 40px; } table td { border: 1px solid; margin: 0 -1px -1px 0; padding-top: 35px; /* дополнительный отступ для предотвращения склеивания заголовков */ position: relative; width: 50%; } /* Отображение span заголовков */ table td span { display: block; }
}

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

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

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

Автор: Bradley Taunt

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

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