> For the complete documentation index, see [llms.txt](https://v1-6-0.pipui.ru/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://v1-6-0.pipui.ru/components/table.md).

# Таблицы

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

{% embed url="<https://codepen.io/pipui/pen/KKBamBW>" %}
Пример работы кода выше
{% endembed %}

Для адаптивной таблицы, потребуется дополнительно указать класс <mark style="color:orange;">`.table-responsive`</mark> к классу .table и продублировать элементы названий шапки с классом <mark style="color:orange;">`.table-cell-resp`</mark>

<details>

<summary>Example responsive</summary>

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

</details>

Если Вам необходимо зафиксировать ширину каждого столбца, используйте класс <mark style="color:orange;">`.table-fixed`</mark> или если потребуется сделать каждый ряд подсвечиваемым при наведении, добавьте класс <mark style="color:orange;">`.table-hover`</mark> к классу .table

<details>

<summary>Example fixed &#x26; hover</summary>

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

</details>