Адаптивный табличный макет

Адаптивный табличный макет

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

Это довольно распространенная проблема, хотя в сети есть несколько решений с адаптивными таблицами. В том числе и шаблон на чистом CSS.

Так что мешает воспользоваться этим или другим шаблоном? Время? Силы? Как насчет быстро пробежаться по этим шаблонам?

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

Создадим такую же таблицу, как сверху, при помощи простого HTML:

<table>
  <caption>Statement Summary</caption>
  <thead>
 <tr>
 <th scope="col">Account</th>
 <th scope="col">Due Date</th>
 <th scope="col">Amount</th>
 <th scope="col">Period</th>
 </tr>
  </thead>
  <tbody>
 <tr>
 <td>Visa - 3412</td>
 <td>04/01/2016</td>
 <td>$1,190</td>
 <td>03/01/2016 - 03/31/2016</td>
 </tr>
  </tbody>
</table>

У нашей таблицы 4 колонки. Давайте пропишем немного стилей:


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

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

table {
  border: 1px solid #ccc;
  border-collapse: collapse;
  margin: 0;
  padding: 0;
  table-layout: fixed;
  width: 100%;
}
table tr {
  background: #f8f8f8;
  border: 1px solid #ddd;
  padding: .35em;
}
table th,
table td {
  padding: .625em;
  text-align: center;
}

Таблица точно такая же, как и другие HTML таблицы, с которыми вы работали. И теперь вы можете задаться вопросом: «Как сделать ее адаптивной?».

Добавляем адаптивность!

Сперва мы добавим атрибут data-label ко всем ячейкам таблицы со значением имени соответствующей колонки. Это нам пригодится для лейблов.

<td data-label="Account">Visa - 3412</td>
<td data-label="Due Date">04/01/2016</td>
<td data-label="Amount">$1,190</td>
<td data-label="Period">03/01/2016 - 03/31/2016</td>

Теперь можно начать писать медиа запросы:

@media screen and (max-width: 600px) {
  table thead {
 border: none;
 clip: rect(0 0 0 0);
 height: 1px;
 margin: -1px;
 overflow: hidden;
 padding: 0;
 position: absolute;
 width: 1px;
  }
  table tr {
 border-bottom: 3px solid #ddd;
 display: block;
  }
  table td {
 border-bottom: 1px solid #ddd;
 display: block;
 text-align: right;
  }
  table td:before {
 content: attr(data-label);
 float: left;
  }
}

На маленьких экранах элементы tr и td будут отображаться в виде блоковых элементов, а не как строки и ячейки таблицы. А псевдокласс :before выполняет роль лейбла. Вот наша таблица (переверните свое устройство):

Это все?

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

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

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

Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Фреймворк Bootstrap - верстаем адаптивно, просто, быстро!

Получите видеокурс по основам Bootstrap

Получить

Метки:

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

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

Комментарии 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