Еще одни простые адаптивные таблицы

На Хабре уже было немало записей про способы отображения таблиц на мобильных устройствах. Я решил предложить свой. Хотя этот способ применим не во всех случаях (а если честно, то таких случаев очень мало), я считаю, что он будет для некоторых из вас полезным.
Пусть у нас есть таблица, столбцы которой никак не связаны друг с другом. К примеру, список преподавателей, студентов и персонала университета.



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



Вручную, конечно же этим заниматься не хотелось. И я решил написать небольшой скрипт на jquery, который сам бы этим занимался.

Итак, сначала найдем исходную таблицу. В моем случае она находится в div-e c id «original». А для будущих таблиц заготовлен div c id «splitted». Также, определим переменные под заголовки её колонок, строки и получаемые таблицы

var table = $('#original').find('table');
var tableHeaders = $('> thead > tr > td', table);
var tableRows = $('> tbody > tr', table);
var tableSplitted = new Array();

Далее, создаем «скелеты» будущих таблиц: получим заголовки, и создадим нужное количество строк

for(var i = 0; i < tableHeaders.length; i++) {		
	$('#splitted').append(
		'<table class="table table-hover table-bordered" id="split_'+i+'">'+
			'<thead>' +
				'<tr></tr>' +
			'</thead>' +
			'<tbody>' +
			'</tbody>' +
		'</table>'
	);
	for(var j = 0; j < tableRows.length; j++) {
		$('table[id="split_'+i+'"] > tbody').append('<tr></tr>');
	};
	$('table[id="split_'+i+'"] > thead > tr').append($(tableHeaders[i]).clone());
	tableSplitted.push($('table[id="split_'+i+'"]'));
};

Теперь заполним строки таблиц. Скажу сразу, что я не смог придумать красивое решение для этого. В данном случае, я предположил, что мне заранее известно количество колонок внутри каждой ячейки

var k = 0;
for(var i = 0; i < tableSplitted.length; i++) {
	var rows = $('> tbody > tr', tableSplitted[i]);
	for(var j = 0; j < rows.length; j++) {
		$(rows[j]).append($('> td:eq('+k+')' , tableRows[j]).clone());
		$(rows[j]).append($('> td:eq('+(k+1)+')' , tableRows[j]).clone());
	};
	k += 2;
};

Теперь осталось разобраться с тем, как нам сделать так чтобы при определенной ширине экрана отображались нужные таблицы. Это я решил примитивным способом — при определенной ширине прятать с помощью css ненужную таблицу

@media (min-width: 768px) {
	#splitted {
		display: none !important;
	}
}
@media (max-width: 767px) {
	#original {
		display: none !important;
	}
}

В сочетании с каким нибудь из современных фреймворков (например bootstrap) получаем желаемое. В обоих случаях полезное содержимое полностью занимает отведенную для него площать, а удобство чтения с мобильного устройства почти ничем не уступает чтению с экрана монитора.



Демо

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

Спасибо за внимание.