Адаптивные решения таблиц для сравнения особенностей

Как создать прилипающее меню с помощью CSS или JQuery

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

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

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

Анатомия таблиц сравнения особенностей

В классической таблице сравнения представлено, как минимум, три продукта (в колонках), а их особенности расположены в строках ниже. В такой структуре обычно первая ячейка каждой строки носит название объекта, а в клетках под продуктами есть галочки, показывающие, есть ли данная функция у этого товара. Примеры классической структуры можно найти: здесь и здесь. Основываясь на этих примерах, мы можем обобщить структуру таблиц сравнения, ниже представлен код:

<table>
  <thead>
    <tr>
      <th>&nbsp;</th>
      <th>Продукт 1</th>
      <th>Продукт 2</th>
      <th>Продукт 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Функция 1</td>
      <td>&#10004;</td>
      <td>&#10004;</td>
      <td>&#10004;</td>
    </tr>
    <tr>
      <td>Функция 2</td>
      <td>&mdash;</td>
      <td>&#10004;</td>
      <td>&#10004;</td>
    </tr>
    <tr>
      <td>Функция 3</td>
      <td>&mdash;</td>
      <td>&mdash;</td>
      <td>&#10004;</td>
    </tr>
    <tr>
      <td>Функция 4</td>
      <td>&mdash;</td>
      <td>&mdash;</td>
      <td>&#10004;</td>
    </tr>
  </tbody>
</table>

Достаточно легко заметить упомянутые выше элементы: название продукта, название функции и метка, показывающая принадлежность к товару. Обратите внимание, что код &#10004;отображает символ галочки. А теперь вернемся к корню проблемы. Должны быть соблюдены несколько условий, чтобы таблицы вели себя адекватно на маленьких экранах:

Пользователь должен с легкостью различать товары;

Функции должны быть легко узнаваемы;

И должно быть понятно, когда функция принадлежит товару, а когда нет.

Лучшее решение – сместить ячейки с названием функций над другими тремя ячейками, обозначающими наличие или отсутствие функции.

Первый способ: Flexbox

И как же добиться этого? Одним из решений станет flexbox. Если же вы не знаете, что это такое, или забыли, вы можете почитать недавнюю статью от NickSalloum по данной теме. А все остальные могут смело читать дальше.

Первым делом, необходимо убедиться, что изменения вступают в силу только на маленьких экранах. Для этого применим медиа запрос, используя классическое значение ширины экрана в 768px.

@media screenand (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;
  }
}

Чтобы наша магия сработала, необходимо знать парочку важных правил:

Мы меняем значение свойства display для строк таблицы на flex, тем самым приказывая дочерним элементам выстроиться в ряд с одинаковыми интервалами.

Далее мы присваиваем ячейкам таблицы значение display: block, чтобы сделать их обычными контейнерами (если оставить значение по умолчанию, то будут применены свойства таблиц, особенно это касается размеров).

Следующим шагом будет выделить первую ячейку каждой строки и растянуть ее на всю ширину, изменив цвет фона для контраста. По правилам обтекания эта ячейка останется сверху – то, что нам и нужно.

И в завершении мы прячем первый th, чтобы не отображалось пустых блоков над названиями продуктов.

Демо можно посмотреть по ссылке.

Естественно, данное решение справедливо, пока оно работает. По данным сайта caniuse.com flexbox под держивается в более чем 80% современных браузеров, и в 93%, если учесть браузеры, поддерживающие вендорные префиксы или использующие старые версии flexbox. IE поддерживается с 10 версии (только синтаксис 2012 года), IE11 имеет полную поддержку. Так как нас интересует поддержка только на маленьких экранах, то мы можем пренебречь поддержкой IE. На мобильных устройствах поддержка начинается с Android 4.4 и iOS 7.1. Для предыдущих версий требуются вендорные префиксы, а также в них не поддерживаются функции обертки.

Также необходимо делать фоллбэки, как, например, div для скроллинга в Bootstrap.

Второй способ: Экстра разметка + ARIA-роли

Если в части браузеров, которые вы собираетесь поддерживать, отсутствует поддержка flexbox, существует альтернатива. Данный метод я использовал в своем проекте в 2013 году. Нужно немного экстра разметки: необходимо добавить один экстра ряд, дублирующий название функции. Это может быть немного утомительным занятием, если заниматься этим вручную. Однако данный процесс можно автоматизировать, если считывать информацию из источника данных. В конце концов, наш код, описанный выше, должен выглядеть так:

<table>
  <thead>
    <tr>
      <th>&nbsp;</th>
      <th>Продукт 1</th>
      <th>Продукт 2</th>
      <th>Продукт 3</th>
    </tr>
  </thead>
  <tbody>
    <tr class="visible-xs" aria-hidden="true">
      <td>&nbsp;</td>
      <tdcolspan="3">Функция 1</td>
    </tr>
    <tr>
      <td>Функция 1</td>
      <td>&#10004;</td>
      <td>&#10004;</td>
      <td>&#10004;</td>
    </tr>
    <tr class="visible-xs" aria-hidden="true">
      <td>&nbsp;</td>
      <tdcolspan="3">Функция 2</td>
    </tr>
    <tr>
      <td>Функция 2</td>
      <td>&mdash;</td>
      <td>&#10004;</td>
      <td>&#10004;</td>
    </tr>
    <tr class="visible-xs" aria-hidden="true">
      <td>&nbsp;</td>
      <tdcolspan="3">Функция 3</td>
    </tr>
    <tr>
      <td>Функция 3</td>
      <td>&mdash;</td>
      <td>&mdash;</td>
      <td>&#10004;</td>
    </tr>
    <tr class="visible-xs" aria-hidden="true">
      <td>&nbsp;</td>
      <td colspan="3">Функция 4</td>
    </tr>
    <tr>
      <td>Функция 4</td>
      <td>&mdash;</td>
      <td>&mdash;</td>
      <td>&#10004;</td>
    </tr>
  </tbody>
</table>

CSSкод также достаточно прост:

.visible-xs {
  display: none;
}
 
@media screenand (max-width: 768px) {
  .visible-xs {
    display: table-row;
  }
 
  td:first-child,
  th:first-child {
    display: none;
  }
}

Ради доступности можно пойти на такой дополнительный шаг и скрыть экстра разметку с помощью aria-hidden=»true». Таким образом, браузеры, уважающие спецификацию aria-hidden, не будут считывать дублирующий контент дважды.

Демо второго метода

Заключение

В данной статье мы разобрали два способа по созданию адаптивных таблиц сравнения. Оба способа имеют свои плюсы и минусы. В конечном итоге ваш выбор должен пасть на определенный метод в зависимости от специфики задачи и вашей аудитории. В большинстве случаев первого способа (с фоллбэками) должно хватить. Если вам и вправду необходимо поддерживать старые версии Android и iOS, вы можете воспользоваться вторым способом. В любом случае, не важно, каким методом вы воспользуетесь, таблицы сравнения функций будут выглядеть намного лучше на маленьких экранах.

Автор: Adrian Sandu

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

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

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки: ,

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

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

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

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

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

Я не робот.

Spam Protection by WP-SpamFree