Верстка адаптивної таблиці

Однією з головних проблем адаптації сайту під різні дозволи є таблиці. Особливо якщо у них дуже багато даних. Давайте розглянемо два способи верстки адаптивної таблиці.

Для початку подивимося як виглядає таблиця:

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

Верстка адаптивної таблиці

5 (100%) 1 vote

Blog

Верстка адаптивної таблиці

Related Posts:

Про нас

Контакти