Таблица

Легко создать прекрасно выглядящие таблицы, которые бывают разных стилей.

Использование

Для установки этого компонента, добавить .uk-table класс <table> элемент.

Пример

Table caption
Заголовок Таблицы Заголовок Таблицы Заголовок Таблицы
Table Footer Table Footer Table Footer
Table Data Table Data Table Data
Table Data Table Data Table Data
Table Data Table Data Table Data

Разметки

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

Столбцы

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

Стиль Описание
Column width Добавьте один из .uk-width-* классы Грид компонент.
Text alignment Добавить .uk-text-left, .uk-text-right или .uk-text-center класс Текстовый компонент.
Text style Взгляните на Текстовый компонент. Например добавить .uk-text-bold класса.

Разметки

<td class="uk-width-1-10 uk-text-right">...</td>
<td class="uk-width-9-10 uk-text-bold">...</td>

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

Вертикально в центр таблицы Контента, просто добавьте .uk-table-middle класс <tr> или <td> элементы.


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

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

Таблица наведение

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

Пример

Заголовок Таблицы Заголовок Таблицы Заголовок Таблицы
Table Data Table Data Table Data
Table Data Table Data Table Data
Table Data Table Data Table Data

Разметки

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

Таблица полосатый

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

Пример

Заголовок Таблицы Заголовок Таблицы Заголовок Таблицы
Table Data Table Data Table Data
Table Data Table Data Table Data
Table Data Table Data Table Data

Разметки

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

Таблица сгущенное

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

Пример

Заголовок Таблицы Заголовок Таблицы Заголовок Таблицы
Table Data Table Data Table Data
Table Data Table Data Table Data
Table Data Table Data Table Data

Разметки

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

Объединить модификаторы

Модификаторы в таблице компонента комбинируются друг с другом.

Пример

Заголовок Таблицы Заголовок Таблицы Заголовок Таблицы
Table Data Table Data Table Data
Table Data Table Data Table Data
Table Data Table Data Table Data

Разметки

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

Адаптивный Таблица

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

Пример

Заголовок Таблицы Заголовок Таблицы Заголовок Таблицы Заголовок Таблицы Заголовок Таблицы Заголовок Таблицы Заголовок Таблицы Заголовок Таблицы
Table Footer Table Footer Table Footer Table Footer Table Footer Table Footer Table Footer Table Footer
Table Data Table Data Table Data Table Data Table Data Table Data Table Data Table Data
Table Data Table Data Table Data Table Data Table Data Table Data Table Data Table Data
Table Data Table Data Table Data Table Data Table Data Table Data Table Data Table Data

Разметки

<div class="uk-overflow-container">
    <table>...</table>
</div>