Одной из главных проблем при адаптации сайта под разные разрешения являются таблицы. Особенно, если в них очень много данных. Давайте рассмотрим два способа вёрстки адаптивной таблицы.
Для начала посмотрим как выглядит таблица:
<table>
<thead>
<tr>
<th>Модель телефона</th>
<th>Цена</th>
<th>RAM, Гб</th>
<th>Диагональ, дюймов</th>
<th>PPI</th>
<th>Аккумулятор, мА·ч</th>
</tr>
</thead>
<tbody>
<tr>
<td>OnePlus One</td>
<td>100500 руб</td>
<td>3</td>
<td>5.5</td>
<td>401</td>
<td>3100</td>
</tr>
<tr>
<td>OnePlus Two</td>
<td>100500 руб</td>
<td>4</td>
<td>5.5</td>
<td>401</td>
<td>3300</td>
</tr>
<tr>
<td>OnePlus X</td>
<td>100500 руб</td>
<td>3</td>
<td>5</td>
<td>441</td>
<td>2525</td>
</tr>
</tbody>
</table>
Bootstrap-способ вёрстки адаптивной таблицы
Скажем прямо: по-настоящему адаптивной такую таблицу не назовешь. Она хорошо смотрится на мобильном, ничего никуда не выпирает и вёрстка сайта не «течёт». Такой способ хорошо подходит, если на вашем сайте таблицы встречаются редко и нет смысла подключать какой-то плагин и писать дополнительные стили из-за них. Такой способ используется Bootstrap-ом. Итак, как это реализуется?
Всё просто: таблица обёрнута в div, которому задана максимальная ширина в 100% и overflow: auto.
<div class="table-responsive" style="max-width: 100%; overflow: auto;">
<table>
...
</table>
</div>
Если таблица длинная, также можно задать максимальную высоту и зафиксировать шапку таблицы.
Результат, как и следующий пример, можно посмотреть на этой странице.
Вёрстка по-настощему адаптивной таблицы
Если же у вас на сайте частенько встречаются таблицы, имеет смысл воспользоваться плагином Footable.
Для начала нужно подключить плагин (скачать на GitHub или подключить с CDN), а также инициализировать его:
<script src="/footable.min.js"></script>
<script>
$(function() {
$('.table').footable({});
});
</script>
Здесь нужно кое-что прояснить: скрипт почему-то считает не ширину viewport-а, а ширину таблицы. Чтобы это исправить, нужно чуть «модернизировать» скрипт:
jQuery(function () {
jQuery('.table').footable({
calculateWidthOverride: function() {
return {width: jQuery(window).width()};
}
});
})
В инициализации указываем класс таблицы или просто тег table, если хотим, чтобы все таблицы на сайте были адаптивными.
Далее для ячеек в шапке таблицы, с помощью data-атрибутов указываем на каких размерах какие колонки будут скрываться:
<table class="table">
<thead>
<th>Модель телефона</th>
<th data-breakpoints="mobile">Цена</th>
<th data-breakpoints="mobile tablet">RAM, Гб</th>
<th data-breakpoints="mobile tablet">Диагональ, дюймов</th>
<th data-breakpoints="mobile tablet">PPI</th>
<th data-breakpoints="mobile tablet">Аккумулятор, мА·ч</th>
</thead>
<tbody>
...
</tbody>
</table>
Что всё это значит? На планшетах будут скрываться колонки «RAM», «Диагональ», «PPI» и «Аккумулятор». При уменьшении до телефонов, к ним присоединится и колонка «Цена».
Контрольные точки можно указать в инициализации:
jQuery(function () {
jQuery('.table').footable({
calculateWidthOverride: function() {
return {width: jQuery(window).width()};
},
breakpoints: {
mobile: 0,
tablet: 720,
desktop: 1024
}
});
})
Это значит что в промежутке 0-720 действует правило для mobile, 720-1024 — tablet, а выше 1024 — desktop. Ничто не мешает создать вам ещё больше правил, если это требуется.
Также можно сделать, чтобы какая-то колонка была раскрыта по-умолчанию. Для этого указываем data-атрибут data-expanded=«true».
<table class="table">
<thead>
<tr class="footable-header">
...
</tr>
</thead>
<tbody>
<tr data-expanded="true">
<td>OnePlus One</td>
<td>100500 руб</td>
<td>3</td>
<td>5.5</td>
<td>401</td>
<td>3100</td>
</tr>
...
</tbody>
</table>
Поделиться