Вёрстка адаптивной таблицы

Адаптивные сайты уже давно перестали быть диковинкой и они встречаются всё чаще и чаще. Учитывая последние новости с ранжированием поисковых систем (если кто не знает, в поиске с мобильного устройства приоритет отдается адаптивным сайтам), количество таких сайтов будет расти и дальше. Можно быть противником адаптации под мобильные устройства или же выступать «за», но факт остается фактом: всё чаще клиенты требуют , чтобы их сайт был адаптивным и веб-мастерам приходится это делать.

Одной из главных проблем при адаптации сайта под разные разрешения являются таблицы. Особенно, если в них очень много данных. Давайте рассмотрим два способа вёрстки адаптивной таблицы.

Для начала посмотрим как выглядит таблица:

<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>

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

comments powered by HyperComments

Автор

webbeaver

webbeaver

Верстаю, читаю, учусь