В мой список раздражающих меня вещей в веб-дизайне входят таблицы, часто не оптимизированые для устройств меньше компьютера. Допустим, я открыл Википедию на iPhone и просматриваю список эпизодов из «Звёздный путь: Следующее поколение» (я вырос в конце 80 — х), в таблице много данных, и состоит она из множества столбцов. Заканчивается это дело множеством тыканий пальцем в экран , переворачиванием устройства, и раздражением.
Это проблема широко распространена в вэбе несмотря на то, что есть несколько вариантов отзывчивых таблиц, в том числе такой просто с помощью CSS:
Так в чем же препятствие для использования этого или другого шаблона? Нужно много времени? Или усилий? Давайте быстро пробежимся по этой теме.
С чего начать?
Мы создадим такую же таблицу на обычном HTML как выше в примере:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<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>
|
Наша Таблица состоит из четырех столбцов. Давайте добавим немного CSS стилей:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
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-таблицы, с которыми вы работали ранее. И, наверное, сейчас вы думаете, так как же мне сделать таблицу резиновой?
Сделаем таблицу адаптивной
Сначала, добавим атрибут aria-label для каждой ячейки данных с именем столбца. Которые будут использоваться в качестве маркировки в отзывчивом макете. Использование aria-label также обеспечивает поддержку для чтения с экрана.
1
2
3
4
|
<td aria-label=«Account»>Visa — 3412</td>
<td aria-label=«Due Date»>04/01/2016</td>
<td aria-label=«Amount»>$1,190</td>
<td aria-label=«Period»>03/01/2016 — 03/31/2016</td>
|
Теперь напишем несколько медиа-запросов
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
@media screen and (max—width: 600px) {
table thead {
display: none;
}
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(aria—label);
float: left;
}
}
|
В маленькой области видимости <tr> и <tr> элементы будут отображаться на блочном уровне, а не как табличные строки и ячейки. А псевдоэлемент :before теперь служит в качестве label.
Вот наша таблица (Попробуйте сузить экран вашего устройства).
See the Pen qargXL by Ruslan (@rkaliev) on CodePen.0
И это все? 😳
Да, в общем то. По крайней мере для этого примера точно все. Имейте в виду, что это только один резиновый макет таблицы с относительно простым содержанием данных. Вы можете использовать различные варианты и управлять более сложными данными, поэтому ваш результат может отличаться. Но всегда принимайте во внимание варианты для лучшего опыта взаимодействия (UX).
Источник: allthingssmitty.com