Довольно часто мне приходится заниматься разработкой сайта и конечно, куда без таблиц? Когда таблица состоит из нескольких столбцов, никаких проблем не возникает, а вот если таблица содержит в себе много данных, то появляется вопрос: как уместить все столбцы таблицы на мобильном устройстве?
На помощь приходят плагины 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>
Результат:

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