Таблица : Table

Таблица. Создавайте стильные таблицы, которые могут быть разных стилей.

Применение

Чтобы применить компонент Table, добавьте класс .uk-table к элементу <table>.

Пример

Заголовок описывающий содержание таблицы
Заголовок Заголовок Заголовок
Нижний колонтитул Нижний колонтитул Нижний колонтитул
Данные таблицы Данные таблицы Данные таблицы
Данные таблицы Данные таблицы Данные таблицы
Данные таблицы Данные таблицы Данные таблицы

Разметка

<table class="uk-table">
    <caption>...</caption>
    <thead>
        <tr>
            <th>Заголовок</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td>Нижний колонтитул</td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>Данные таблицы</td>
        </tr>
    </tbody>
</table>

Columns

Чтобы изменить ширину колонки или содержимого, вы можете использовать другие компоненты. Вот несколько полезных примеров:

Стиль Описание
Ширина колонки Добавьте один из классов .uk-width-* из компонента Grid, чтобы изменить ширину колонки.
Выравнивание текста Добавьте один из классов .uk-text-left, .uk-text-right или .uk-text-center из компонента Text.
Стиль текста Посмотрите на доступные классы компонента Text. Например добавьте класс .uk-text-bold или .uk-text-uppercase.

Разметка

<td class="uk-width-2-10 uk-text-right">...</td>
<td class="uk-width-8-10 uk-text-bold">...</td>

Вертикальный модификатор

Для вертикального центрирования содержимого таблицы добавьте класс .uk-table-middle к элементам <tr> или <td>.


Модификаторы

Чтобы отобразить таблицу в другом стиле, добавьте класс-модификатор к .uk-table.

Таблица - эффект «Hover»

Добавьте класс .uk-table-hover для отображения стиля строки таблицы при наведении на неё курсора мыши.

Пример

Заголовок Заголовок Заголовок
Данные таблицы Данные таблицы Данные таблицы
Данные таблицы Данные таблицы Данные таблицы
Данные таблицы Данные таблицы Данные таблицы

Разметка

<table class="uk-table uk-table-hover">
    ...
</table>

Таблица - эффект «Зебра»

Для создания эффекта "чередование зебры" в таблице, добавьте класс .uk-table-striped.

Пример

Заголовок Заголовок Заголовок
Информация в таблице Информация в таблице Информация в таблице
Информация в таблице Информация в таблице Информация в таблице
Информация в таблице Информация в таблице Информация в таблице

Разметка

<table class="uk-table uk-table-striped">
    ...
</table>

Таблица - эффект «Condensed»

Добавьте класс .uk-table-condensed, чтобы сделать ячейки таблицы более компактными.

Пример

Название Название Название
Сведения таблицы Сведения таблицы Сведения таблицы
Сведения таблицы Сведения таблицы Сведения таблицы
Сведения таблицы Сведения таблицы Сведения таблицы

Разметка

<table class="uk-table uk-table-condensed">
    ...
</table>

Комбинирование модификаторов

Модификаторы компонента Table можно комбинировать друг с другом.

Пример

Заголовок Заголовок Заголовок
Данные таблицы Данные таблицы Данные таблицы
Данные таблицы Данные таблицы Данные таблицы
Данные таблицы Данные таблицы Данные таблицы

Разметка

<table class="uk-table uk-table-hover uk-table-striped uk-table-condensed">
    ...
</table>

Адаптивная таблица

Если ваша таблица окажется шире, чем ее контейнерный элемент, или в конечном итоге станет слишком большой для определенной ширины девайса, оберните ее внутри элемента <div> с классом .uk-overflow-container. Это создаст контейнер, который обеспечивает горизонтальную полосу прокрутки всякий раз, когда элементы внутри него шире, чем сам контейнер.

Пример

Отзывчивая таблица
Заголовок Заголовок Заголовок Заголовок Заголовок Заголовок Заголовок Заголовок
Нижний колонтитул Нижний колонтитул Нижний колонтитул Нижний колонтитул Нижний колонтитул Нижний колонтитул Нижний колонтитул Нижний колонтитул
Данные таблицы Данные таблицы Данные таблицы Данные таблицы Данные таблицы Данные таблицы Данные таблицы Данные таблицы
Данные таблицы Данные таблицы Данные таблицы Данные таблицы Данные таблицы Данные таблицы Данные таблицы Данные таблицы
Данные таблицы Данные таблицы Данные таблицы Данные таблицы Данные таблицы Данные таблицы Данные таблицы Данные таблицы

Разметка

<div class="uk-overflow-container">
    <table class="uk-table">
        <caption>Отзывчивая таблица</caption>
        ...
    </table>
</div>