Таблицы
В PipUI есть готовые стили для таблиц, а так же их адаптивная версия под разные разрешения экранов.
HTML
<div class="table">
<div class="table-row">
<div class="table-cell">1</div>
<div class="table-cell">PipUI Alpha</div>
<div class="table-cell">1.0.0</div>
</div>
<div class="table-row">
<div class="table-cell">2</div>
<div class="table-cell">PipUI Beta</div>
<div class="table-cell">1.0.0RC-2</div>
</div>
</div>
Для адаптивной таблицы, потребуется дополнительно указать класс .table-responsive к классу .table и продублировать элементы названий шапки с классом .table-cell-resp
#
1
Наименование
PipUI Alpha
Версия
1.0.0
#
2
Наименование
PipUI Beta
Версия
1.0.0RC-2
HTML
<div class="table table-responsive">
<div class="table-header">
<div class="table-row">
<div class="table-cell-resp">#</div>
<div class="table-cell">#</div>
<div class="table-cell-resp">Наименование</div>
<div class="table-cell">Наименование</div>
<div class="table-cell-resp">Версия</div>
<div class="table-cell">Версия</div>
</div>
</div>
<div class="table-body">
<div class="table-row">
<div class="table-cell-resp">#</div>
<div class="table-cell">1</div>
<div class="table-cell-resp">Наименование</div>
<div class="table-cell">PipUI Alpha</div>
<div class="table-cell-resp">Версия</div>
<div class="table-cell">1.0.0</div>
</div>
<div class="table-row">
<div class="table-cell-resp">#</div>
<div class="table-cell">2</div>
<div class="table-cell-resp">Наименование</div>
<div class="table-cell">PipUI Beta</div>
<div class="table-cell-resp">Версия</div>
<div class="table-cell">1.0.0RC-2</div>
</div>
</div>
</div>
Если Вам необходимо зафиксировать ширину каждого столбца, используйте класс .table-fixed или если потребуется сделать каждый ряд подсвечиваемым при наведении, добавьте класс .table-hover к классу .table
HTML
<div class="table table-fixed table-hover">
<div class="table-header">
<div class="table-row">
<div class="table-cell-resp">#</div>
<div class="table-cell">#</div>
<div class="table-cell-resp">Наименование</div>
<div class="table-cell">Наименование</div>
<div class="table-cell-resp">Версия</div>
<div class="table-cell">Версия</div>
</div>
</div>
<div class="table-row">
<div class="table-cell">1</div>
<div class="table-cell">PipUI Alpha</div>
<div class="table-cell">1.0.0</div>
</div>
<div class="table-row">
<div class="table-cell">2</div>
<div class="table-cell">PipUI Beta</div>
<div class="table-cell">1.0.0RC-2</div>
</div>
<div class="table-row">
<div class="table-cell">3</div>
<div class="table-cell">PipUI</div>
<div class="table-cell">1.0.0</div>
</div>
<div class="table-row">
<div class="table-cell">4</div>
<div class="table-cell">PipUI</div>
<div class="table-cell">2.0.0</div>
</div>
</div>