Стандартная таблица
Данный класс .shop-table отвечает за дефолтные стили и отображение табличных данных в BOX. Применяется к обычной таблице (table). Структура поддерживает классы-модификаторы и обертки для более гибкой настройки отображения.
<table class="shop-table" width="100%">
<thead>
<tr>
<td>Column content</td>
<td>Column content</td>
</tr>
</thead>
<tr>
<td>Column content</td>
<td>Column content</td>
</tr>
<tfoot>
<tr>
<td>Column content</td>
<td>Column content</td>
</tr>
</tfoot>
</table>
Высокая таблица
Для вывода таблицы с большим отступом в ячейках необходимо использовать модификатор .large
<table class="shop-table large" width="100%">
<thead>
<tr>
<td>Column content</td>
<td>Column content</td>
</tr>
</thead>
<tr>
<td>Column content</td>
<td>Column content</td>
</tr>
<tfoot>
<tr>
<td>Column content</td>
<td>Column content</td>
</tr>
</tfoot>
</table>
Таблица с горизонтальной прокруткой
Для вывода таблицы с горизонтальной прокруткой необходимо использовать для таблицы дополнительную обвертку .shop-overflow-table Это добавит горизонтальный скроллбар вашей таблице.
<div class="shop-overflow-table">
<table class="shop-table" width="100%">
<thead>
<tr>
<td>Column content</td>
<td>Column content</td>
</tr>
</thead>
<tr>
<td>Column content</td>
<td>Column content</td>
</tr>
<tfoot>
<tr>
<td>Column content</td>
<td>Column content</td>
</tr>
</tfoot>
</table>
</div>
Таблица с сортировкой
Для сортировки таблицы необходимо использовать функцию tablesorter(), это позволит осуществлять сортировку в таблице моментально и без перезагрузки страницы.
Для отмены сортировки в определенной колонке, необходимо использовать data-атрибут data-sorter="false" для заглавной ячейки таблицы.
Визуально, столбцы с сортировкой будут иметь стрелки направления сортировки.
<table class="shop-table js-table-sort" width="100%">
<thead>
<tr>
<td>Column content</td>
<td data-sorter="false">Column content</td>
</tr>
</thead>
<tr>
<td>Column content</td>
<td>Column content</td>
</tr>
<tfoot>
<tr>
<td>Column content</td>
<td>Column content</td>
</tr>
</tfoot>
</table>
<script>
$j(".js-table-sort").tablesorter();
</script>