MY SPELE
+380678383535
team@spele.ua

Таблицы

Стандартная таблица

 

Данный класс .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>