Таблица

• Применение
• Columns
• Вертикальный модификатор
• Модификаторы
• Таблица - эффект «Hover»
• Таблица - эффект «Зебра»
• Таблица - эффект «Condensed»
• Комбинирование модификаторов
• Адаптивная таблица

Применение

Чтобы применить компонент 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

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

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