Адаптивные таблицы с помощью плагинов jQuery

Довольно часто мне приходится заниматься разработкой сайта и конечно, куда без таблиц? Когда таблица состоит из нескольких столбцов, никаких проблем не возникает, а вот если таблица содержит в себе много данных, то появляется вопрос: как уместить все столбцы таблицы на мобильном устройстве?

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

stacktable.js

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

https://johnpolacek.github.io/stacktable.js/

Инициализация:

$('#simple-example-table').stacktable();

HTML-код таблицы:

<table id="simple-example-table" cellspacing="0">
    <tbody>
      <tr align="left">
        <th width="30%">Stuff</th>
        <th width="12%">Rate</th>
        <th width="12%">Amount</th>
        <th width="12%">Points</th>
        <th width="12%">Number</th>
        <th width="18%">Type</th>
        <th width="12%">Name</th>
      </tr>
      <tr>
        <td>Something</td>
        <td>3.375%</td>
        <td>$123.12</td>
        <td>1.125</td>
        <td>4,000</td>
        <td>Potato</td>
        <td>Paul</td>
      </tr>
      <tr>
        <td>Something Else</td>
        <td>2.750%</td>
        <td>$345.23</td>
        <th>5</th>
        <td>180</td>
        <td>Spaceship</td>
        <td>Skippy</td>
      </tr>
      <tr>
        <th colspan="7" class="sub">Subgroup Header</th>
      </tr>
      <tr>
        <td>Another Thing</td>
        <td>3.375%</td>
        <td>$563.12</td>
        <th>222</th>
        <td>60</td>
        <td>Gym Shoe</td>
        <td>George</td>
      </tr>
      <tr>
        <td>Thing w/Less Stuff</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td>Harmonica</td>
        <td>Helga</td>
      </tr>
      <tr>
        <td>Last Thing</td>
        <td></td>
        <td></td>
        <td></td>
        <td>4</td>
        <td>Meaning of Life</td>
        <td></td>
      </tr>
    </tbody>
  </table>

Результат:

jQuery-rt-Responsive-Tables

Плагин берет из таблицы теги <th> и располагает их вертикально в мобильной версии сайта. Работать с плагином очень просто.

https://github.com/stazna01/jQuery-rt-Responsive-Tables

Инициализация:

$("table").rtResponsiveTables();

<table>
	<thead>
	<tr>
		<th>First Name</th>
		<th>Middle Name</th>
		<th>Last Name</th>
		<th>Occupation</th>
		<th>Date of Birth</th>
		<th>Favorite Food</th>
	</tr>
	</thead>
	<tbody>
	<tr>
		<td>Michael</td>
		<td>Gary</td>
		<td>Scott</td>
		<td>Regional Manager, Dunder Mifflin, Scranton</td>
		<td>March 15, 1964</td>
		<td>"Everything" Pretzels</td>
	</tr>
	<tr>
		<td>Dwight</td>
		<td>Kurt</td>
		<td>Schrute</td>
		<td>Assistant to the Regional Manager, Dunder Mifflin, Scranton PA</td>
		<td>January 20, 1968</td>
		<td>Beets</td>
	</tr>
	</tbody>
</table>

Результат:

По-возможности, я буду пополнять статью описание и других плагинов. Если у вас есть какие-то другие удобные плагины, пишите в комментарии!