Адаптивная верстка таблиц сравнения
27 декабря 2015 в 12:00 в категории Вёрстка 0 комментариевСовременный человек все больше и больше времени проводит в сети интернет, используя мобильные устройства. И задача разработчика уже не просто создать сайт или разработать интернет магазин, а сделать его максимально удобным для использования на мобильных устройствах.
Одним из важных разделов при создании интернет магазина является страница сравнения товаров, которая выводится в виде таблицы, и в данной статье мы рассмотрим решение для ее адаптивной верстки.
Для начала приведем пример стандартной таблицы, которая выводит список характеристик товаров для сравнения:
<table> <thead> <tr> <th> </th> <th>Продукт 1</th> <th>Продукт 2</th> <th>Продукт 3</th> </tr> </thead> <tbody> <tr> <td>Характеристка 1</td> <td>✔</td> <td>✔</td> <td>✔</td> </tr> <tr> <td>Характеристка 2</td> <td>—</td> <td>✔</td> <td>✔</td> </tr> <tr> <td>Характеристка 3</td> <td>—</td> <td>—</td> <td>✔</td> </tr> <tr> <td>Характеристка 4</td> <td>—</td> <td>—</td> <td>✔</td> </tr> </tbody> </table>
Теперь перейдем к сути проблемы. Таблица должна быть удобной для просмотра на мобильных экранах, и пользователь должен иметь возможность легко сравнивать продукты. Для достижения данной цели есть два метода.
Решение 1: Flexbox
Используя следующие CSS свойства, мы можем сделать нашу табличку адаптивной:
@media screen and (max-width: 768px) { tr { display: flex; flex-flow: row wrap; justify-content: space-around; } td, th { display: block; width: 33%; } th:first-child, td:first-child { text-align: center; background: #efefef; width: 100%; } th:first-child { display: none; } }
Однако, данное решение не является универсальным, т.к. поддержка flexbox составляет около 80% для современных браузеров и более 93%, если учитывать версии браузеров, которые требуют префиксы. Поддержка IE начинается с IE10 (синтаксис 2012 года), в то время как IE11 имеет полную поддержку.
Так как мы заинтересованы в поддержке маленьких экранов, то мы можем игнорировать отсутствие поддержки предыдущих версий IE. На мобильных устройствах, поддержка начинается с Android 4.4 и iOS 7.1. Предыдущие версии требуют префиксы или не поддерживают данную функцию.
Решение 2: доп. разметка + ARIA
Если все-таки большая часть из браузеров, которые вы собираетесь охватить, не поддерживает flexbox, то есть альтернатива, однако необходимо будет добавить дополнительную разметку: мы должны добавить один дополнительный ряд, дублируя название характеристик. Вот модифицированный код для данного решения из нашего примера:
<table> <thead> <tr> <th> </th> <th>Продукт 1</th> <th>Продукт 2</th> <th>Продукт 3</th> </tr> </thead> <tbody> <tr class="visible-xs" aria-hidden="true"> <td> </td> <td colspan="3">Характеристика 1</td> </tr> <tr> <td>Характеристика 1</td> <td>✔</td> <td>✔</td> <td>✔</td> </tr> <tr class="visible-xs" aria-hidden="true"> <td> </td> <td colspan="3">Характеристика 2</td> </tr> <tr> <td>Характеристика 2</td> <td>—</td> <td>✔</td> <td>✔</td> </tr> <tr class="visible-xs" aria-hidden="true"> <td> </td> <td colspan="3">Характеристика 3</td> </tr> <tr> <td>Характеристика 3</td> <td>—</td> <td>—</td> <td>✔</td> </tr> <tr class="visible-xs" aria-hidden="true"> <td> </td> <td colspan="3">Характеристика 4</td> </tr> <tr> <td>Характеристика 4</td> <td>—</td> <td>—</td> <td>✔</td> </tr> </tbody> </table>
CSS в таком случае будет еще проще:
.visible-xs { display: none; } @media screen and (max-width: 768px) { .visible-xs { display: table-row; } td:first-child, th:first-child { display: none; } }
Выводы
Итак, мы ознакомились с двумя вариантами адаптивной верстки таблиц для сравнения. Оба варианта имеют свои плюсы и минусы. В конце концов, выбранный вариант должен зависеть от специфики вашей аудитории. В большинстве случаев, первого варианта должно быть достаточно.
А если вам действительно нужна поддержка более старых версий Android и iOS, вы можете использовать второй вариант. В любом случае, теперь, ваши таблицы сравнений будут выглядеть намного лучше, независимо от размера экрана.