Таблицы

В PipUI есть готовые стили для таблиц, а так же их адаптивная версия под разные разрешения экранов.

<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

<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

<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>