Адаптивная верстка таблиц под мобильную версию

Вместо таблицы картинка

Как вариант вместо таблицы старается загружать картинку с таблицей. Конечно, в таком случае головной боли с адаптивностью практически нет. Картинка масштабируется под размер смартфона. Можно сделать например две версии. Для декстопа будет отображаться обычная таблица, для мобильной версии картинка.

Однако есть у этой стороны и минусы. Первый минус. Придется делать двойную работу. Сначала верстаем табличку. Потом сохраняем ее в картинку. Грузим на сервер. Второй минус. Большие таблицы ужасно ужмутся и нельзя будет что-то прочесть на них.

Уменьшаем шрифт в таблице

Самый очевидный способ конечно, это просто уменьшить шрифт в таблице. И этот способ вполне себе хорошо работает для небольших таблиц. Хорошо подходит для трехколоночных таблиц, где отстутствуют длинные слова. Прекрасно помещаются на экран смартфона. Если у вас небольшие таблички до трех колонок, то конечно лучше всего воспользоваться этим способом.

А минусом данного метода служит то, что чем больше текста и колонок в таблице, тем сложнее будет все решить размером шрифта.

Полоса прокрутки

Пусть у нас есть вот такая таблица:

Изящное решение, просто добавить к таблице полосу прокрутки. Для этого надо таблицу обернуть в тег div

<div class="table-responsive">
	<table>
		<tr>
			<th>Заголовок 1</th>
			<th>Заголовок 2</th>
			<th>Заголовок 3</th>
			<th>Заголовок 4</th>
			<th>Заголовок 5</th>
			<th>Заголовок 6</th>
			<th>Заголовок 7</th>
			<th>Заголовок 8</th>
			<th>Заголовок 9</th>
		</tr>
		<tr>
			<td>Ячейка 1</td>
			<td>Ячейка 2</td>
			<td>Ячейка 3</td>
			<td>Ячейка 4</td>
			<td>Ячейка 5</td>
			<td>Ячейка 6</td>
			<td>Ячейка 7</td>
			<td>Ячейка 8</td>
			<td>Ячейка 9</td>
		</tr>
	</table>
</div>

А потом просто div'у прописать свойство overflow:auto

@media all and (max-width: 520px){

	.table-responsive{
		overflow-x:auto;
	}

}

или же можно всегда отображать полосу прокрутки overflow:scroll

Данные вариант может визуально смотреться не очень хорошо для таблиц с большим количеством строк.

Блочное отображение таблицы

Возьмем следующую таблицу.

А сильно ли нам надо отображать таблицу таблицей? Почему бы для мобильной версии не отображать ячейки таблицы обычными дивами? А чтобы не запутаться, заранее вставлять заголовок стоблика в ячейку (td) таблицы.

<table class="mobile_table">
	<tr>
		<th>Цвет</th>
		<th>Материал</th>
		<th>Продано</th>
	</tr>
	<tr>
		<td data-th="Цвет">Красный</td>
		<td data-th="Материал">Пластик</td>
		<td data-th="Продано">Нет</td>
	</tr>
	<tr>
		<td data-th="Цвет">Белый</td>
		<td data-th="Материал">Хром</td>
		<td data-th="Продано">Да</td>
	</tr>
	<tr>
		<td data-th="Цвет">Зеленый</td>
		<td data-th="Материал">Аллюминий</td>
		<td data-th="Продано">Нет</td>
	</tr>
</table>

Код CSS:

@media all and (max-width: 520px){
	.mobile_table,
	.mobile_table thead,
	.mobile_table tbody,
	.mobile_table tr,
	.mobile_table td{
		display:block;
	}
	
	.mobile_table th{
		display:none;
	}
	
	.mobile_table tr{
		margin-bottom:10px;
	}
	
	.mobile_table td{
		padding:0px;
		border:none;
	}
	
	.mobile_table td::before{
		content:attr(data-th) ': ';
		font-weight:bold;
	}
}

Выглядит все это примерно так:

Минус один. Это уже не похоже на таблицу, но зато можно самые громоздкие таблицы привести к какому-то общему виду.

Упрощаем жизнь jquery-скриптом.

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

Сделать это можно посредством маленького и замечательного кода на jQuery.

$('table.js_mobile_table').each(function(){
		
	var header = [];
	
	$(this).find('th').each(function(){
		
		header.push( $(this).html().trim() );
	});
	
	$(this).find('tr').each(function(){
		
		$(this).find('td').each(function(key, elem){
							
			$(this).attr('data-th', header[key]);
		});
	});
});

Смысл в следующем. Собираем с первой строки все th и потом их по порядку проставляем в data-атрибуты во всех строках ниже. Конечно стоит помнить, что скрипт не будет работать корректно, если th размещать сбоку или же если таблица будет с объединенными ячейками.

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