Компонент Таблица : Table

Создавайте красивые адаптивные таблицы и добавляйте разные стили. Таблица с эффектом «Зебра»; таблица стопкой на маленьких экранах.

Руководство по использованию

Чтобы применить компонент Таблица, добавьте к элементу <table> класс .uk-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>
  • Заголовок таблицы описывающий ее содержание
    Заголовок таблицы Заголовок таблицы Заголовок таблицы
    Нижний колонтитул Нижний колонтитул Нижний колонтитул
    Данные таблицы Данные таблицы Данные таблицы
    Ячейка таблицы Ячейка таблицы Ячейка таблицы
  • <table class="uk-table">
        <caption>Заголовок таблицы описывающий ее содержание</caption>
        <thead>
            <tr>
                <th>Заголовок таблицы</th>
                <th>Заголовок таблицы</th>
                <th>Заголовок таблицы</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <td>Нижний колонтитул</td>
                <td>Нижний колонтитул</td>
                <td>Нижний колонтитул</td>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <td>Данные таблицы</td>
                <td>Данные таблицы</td>
                <td>Данные таблицы</td>
            </tr>
            <tr>
                <td>Ячейка таблицы</td>
                <td>Ячейка таблицы</td>
                <td>Ячейка таблицы</td>
            </tr>
        </tbody>
    </table>

Модификатор «Divider»

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

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

Таблица с разделителем между строками

  • Принцип разделителя Правда разделителя Невероятность разделителя
    Одинаковые действия Одинаковых причин Невероятность будет
    Разрешение вопроса Тождественное приспособление Соответствующий вид
    Геометрической таблицы Вводится целесообразность Параллельный прогресс
  • <table class="uk-table uk-table-divider">
        <thead>
            <tr>
                <th>Принцип разделителя</th>
                <th>Правда разделителя</th>
                <th>Невероятность разделителя</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Одинаковые действия</td>
                <td>Одинаковых причин</td>
                <td>Невероятность будет</td>
            </tr>
            <tr>
                <td>Разрешение вопроса</td>
                <td>Тождественное приспособление</td>
                <td>Соответствующий вид</td>
            </tr>
            <tr>
                <td>Геометрической таблицы</td>
                <td>Вводится целесообразность</td>
                <td>Параллельный прогресс</td>
            </tr>
        </tbody>
    </table>

Модификатор Striped с эффектом «Зебра»

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

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

Таблица с эффектом Зебра

  • Невероятная Зебра Эффект чередование Модификатор Striped
    Действие отбора Зебра ячейка Удивительным образом
    Ячейка преимуществ Вопрос разрешим Существенные части
    Ячейка Зебра Отдельное изменение Необходимо отражается
  • <table class="uk-table uk-table-striped">
        <thead>
            <tr>
                <th>Невероятная Зебра</th>
                <th>Эффект чередование</th>
                <th>Модификатор Striped</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Действие отбора</td>
                <td>Зебра ячейка</td>
                <td>Удивительным образом</td>
            </tr>
            <tr>
                <td>Ячейка преимуществ</td>
                <td>Вопрос разрешим</td>
                <td>Существенные части</td>
            </tr>
            <tr>
                <td>Ячейка Зебра</td>
                <td>Отдельное изменение</td>
                <td>Необходимо отражается</td>
            </tr>
        </tbody>
    </table>

Модификатор «Hover». Эффект «Наведение»

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

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

Таблица со стилем при наведении

  • Заголовок таблицы При наведении Стильная таблица
    Данные ячейки Совокупность перемен Вмешательство ячейки
    Значения ячейки Данные функций Простые ячейки
    Удобный способ Накопления изменений Данные достижения
  • <table class="uk-table uk-table-hover uk-table-divider">
        <thead>
            <tr>
                <th>Заголовок таблицы</th>
                <th>При наведении</th>
                <th>Стильная таблица</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Данные ячейки</td>
                <td>Совокупность перемен</td>
                <td>Вмешательство ячейки</td>
            </tr>
            <tr>
                <td>Значения ячейки</td>
                <td>Данные функций</td>
                <td>Простые ячейки</td>
            </tr>
            <tr>
                <td>Удобный способ</td>
                <td>Накопления изменений</td>
                <td>Данные достижения</td>
            </tr>
        </tbody>
    </table>

Модификатор «Размер»

Добавьте к таблице класс .uk-table-small или .uk-table-large, чтобы сделать ее меньше или больше.

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

Таблица с уменьшенными внутренними отступами

  • Размер таблицы Меньше таблица Больше таблица
    Возможность таблицы Данные приписывал Усилия таблицы
    Термин таблицы Обыкновенно называется Притом тщательно
    Всегда заключают Нужно смотреть Приобретенные свойства
  • <table class="uk-table uk-table-small uk-table-divider">
        <thead>
            <tr>
                <th>Размер таблицы</th>
                <th>Меньше таблица</th>
                <th>Больше таблица</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Возможность таблицы</td>
                <td>Данные приписывал</td>
                <td>Усилия таблицы</td>
            </tr>
            <tr>
                <td>Термин таблицы</td>
                <td>Обыкновенно называется</td>
                <td>Притом тщательно</td>
            </tr>
            <tr>
                <td>Всегда заключают</td>
                <td>Нужно смотреть</td>
                <td>Приобретенные свойства</td>
            </tr>
        </tbody>
    </table>

Модификатор «Justify»

Чтобы удалить внешние отступы первого и последнего столбца, чтобы они находились вровень с таблицей, добавьте класс .uk-table-justify.

<table class="uk-table uk-table-justify">...</table>
  • Заголовок таблицы Заголовок столбца Кнопочный заголовок
    Данные таблицы Он ничего не сказал, а лишь поднял руку и погладил ее по щеке. Она с удивлением ахнула. Она разрывалась между желанием, которое несомненно испытывала.
    Известно, что Если вы вдруг себя плохо почувствовали, сожмите виски пальцами и начинайте медленно вращать по часовой стрелке... А затем выпейте содержимое.
  • <table class="uk-table uk-table-justify uk-table-divider">
        <thead>
            <tr>
                <th class="uk-width-small">Заголовок таблицы</th>
                <th>Заголовок столбца</th>
                <th>Кнопочный заголовок</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Данные таблицы</td>
                <td>Он ничего не сказал, а лишь поднял руку и погладил ее по щеке. Она с удивлением ахнула. Она разрывалась между желанием, которое несомненно испытывала.</td>
                <td><button class="uk-button uk-button-default" type="button">Кнопка</button></td>
            </tr>
            <tr>
                <td>Известно, что</td>
                <td>Если вы вдруг себя плохо почувствовали, сожмите виски пальцами и начинайте медленно вращать по часовой стрелке... А затем выпейте содержимое.</td>
                <td><button class="uk-button uk-button-default" type="button">Кнопка</button></td>
            </tr>
        </tbody>
    </table>

Модификатор «Выравнивание»

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

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

Вертикальное выравнивание

  • Заголовок таблицы Заголовок таблицы Заголовок таблицы
    Данные таблицы Маленький ручеек Даль журчит по всей стране и обеспечивает ее всеми необходимыми правилами. Эта парадигма тическая страна, в которой жаренные члены предложения залетают прямо в Lorem.
    Данные таблицы Даже всемогущая пунктуация не имеет власти над рыбными текстами, ведущими безорфо графичный образ жизни. Однажды одна маленькая строчка рыбного текста по имени Lorem ipsum.
  • <table class="uk-table uk-table-middle uk-table-divider">
        <thead>
            <tr>
                <th class="uk-width-small">Заголовок таблицы</th>
                <th class="uk-table-middle">Заголовок таблицы</th>
                <th>Заголовок таблицы</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Данные таблицы</td>
                <td>Маленький ручеек Даль журчит по всей стране и обеспечивает ее всеми необходимыми правилами. Эта парадигма тическая страна, в которой жаренные члены предложения залетают прямо в Lorem.</td>
                <td><button class="uk-button uk-button-default" type="button">Кнопка</button></td>
            </tr>
            <tr>
                <td>Данные таблицы</td>
                <td>Даже всемогущая пунктуация не имеет власти над рыбными текстами, ведущими безорфо графичный образ жизни. Однажды одна маленькая строчка рыбного текста по имени Lorem ipsum.</td>
                <td><button class="uk-button uk-button-default" type="button">Кнопка</button></td>
            </tr>
        </tbody>
    </table>

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

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

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

Отзывчивая таблица

  • Отзывчивая таблица Сделать несколько Покатилась вслед Безграничное восхищение Полезно добавить Точное представление Развиваем торговлю Великими свершениями Долгого времени Чудесные движение Собственное представление Приходит сообщить
    Данные таблицы Первый приходит Всегда говорил Оставался доволен Действительно великие Данные таблицы Очаровательных изречений Данные таблицы Предстоит познать Обращал внимания Втолковывая опытным Данные таблицы
    Среднюю стойку Непременно устраивался Данные таблицы Данные таблицы Особое свойство Данные тешатся Всеобщее уважение Данные разъяснения Плюс несколько Заблаговременно обратиться Опасения рассеялись Успехом можно
    Чудесные строчки Данные разъяснения Опасения рассеялись Скромность таблицы Чудесные таблицы Приходилось встречаться Данные таблицы Данные тешатся Чудесные строчки Особое свойство Всеобщее уважение Данные таблицы
  • <div class="uk-overflow-auto">
        <table class="uk-table uk-table-small uk-table-divider">
            <thead>
                <tr>
                    <th>Отзывчивая таблица</th>
                    <th>Сделать несколько</th>
                    <th>Покатилась вслед</th>
                    <th>Безграничное восхищение</th>
                    <th>Полезно добавить</th>
                    <th>Точное представление</th>
                    <th>Развиваем торговлю</th>
                    <th>Великими свершениями</th>
                    <th>Долгого времени</th>
                    <th>Чудесные движение</th>
                    <th>Собственное представление</th>
                    <th>Приходит сообщить</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Данные таблицы</td>
                    <td>Первый приходит</td>
                    <td>Всегда говорил</td>
                    <td>Оставался доволен</td>
                    <td>Действительно великие</td>
                    <td>Данные таблицы</td>
                    <td>Очаровательных изречений</td>
                    <td>Данные таблицы</td>
                    <td>Предстоит познать</td>
                    <td>Обращал внимания</td>
                    <td>Втолковывая опытным</td>
                    <td>Данные таблицы</td>
                </tr>
                <tr>
                    <td>Среднюю стойку</td>
                    <td>Непременно устраивался</td>
                    <td>Данные таблицы</td>
                    <td>Данные таблицы</td>
                    <td>Особое свойство</td>
                    <td>Данные тешатся</td>
                    <td>Всеобщее уважение</td>
                    <td>Данные разъяснения</td>
                    <td>Плюс несколько</td>
                    <td>Заблаговременно обратиться</td>
                    <td>Опасения рассеялись</td>
                    <td>Успехом можно</td>
                </tr>
                <tr>
                    <td>Чудесные строчки</td>
                    <td>Данные разъяснения</td>
                    <td>Опасения рассеялись</td>
                    <td>Скромность таблицы</td>
                    <td>Чудесные таблицы</td>
                    <td>Приходилось встречаться</td>
                    <td>Данные таблицы</td>
                    <td>Данные тешатся</td>
                    <td>Чудесные строчки</td>
                    <td>Особое свойство</td>
                    <td>Всеобщее уважение</td>
                    <td>Данные таблицы</td>
                </tr>
            </tbody>
        </table>
    </div>

Стопкой на маленьких экранах : Таблица конструктор

Если вы хотите, чтобы столбцы таблицы складывались на маленьких экранах, добавьте класс .uk-table-responsive.

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

Таблица конструктор

  • Стопкой таблица Складываемая таблица Таблица конструктор
    Ячейка 1.1 Ячейка 1.2 Ячейка 1.3
    Ячейка 2.1 Ячейка 2.2 Ячейка 2.3
    Ячейка 3.1 Ячейка 3.2 Ячейка 3.3
  • <table class="uk-table uk-table-responsive uk-table-divider">
        <thead>
            <tr>
                <th>Стопкой таблица</th>
                <th>Складываемая таблица</th>
                <th>Таблица конструктор</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Ячейка 1.1</td>
                <td>Ячейка 1.2</td>
                <td>Ячейка 1.3</td>
            </tr>
            <tr>
                <td>Ячейка 2.1</td>
                <td>Ячейка 2.2</td>
                <td>Ячейка 2.3</td>
            </tr>
            <tr>
                <td>Ячейка 3.1</td>
                <td>Ячейка 3.2</td>
                <td>Ячейка 3.3</td>
            </tr>
        </tbody>
    </table>

Измените размер окна браузера, чтобы увидеть стопку из столбцов.


Модификатор «Ширина столбца или ячейки»

Чтобы изменить ширину столбца или содержимого ячейки, вы можете использовать один из следующих классов. Вам просто нужно добавить этот класс в одну из ячеек столбца. Рекомендуется в ячейке заголовка.

Класс Описание
.uk-table-shrink Добавьте этот класс к элементу <th> или <td>, чтобы уменьшить ширину столбца до его содержимого.
.uk-table-expand Добавьте этот класс к элементу <th> или <td>, чтобы расширить ширину столбца, заполнить оставшееся пространство и применить минимальную ширину (min-width).
.uk-width-* Добавьте один из этих классов из компонента Ширина в элемент <th> или <td>, чтобы изменить ширину столбца.
<th class="uk-table-shrink"></th>
  • Shrink Expand Width Small
    Данные таблицы Содержимое ячейки Данные таблицы
    Данные ячейки Данные таблицы Содержимое ячейки
  • <table class="uk-table uk-table-divider">
        <thead>
            <tr>
                <th class="uk-table-shrink">Shrink</th>
                <th class="uk-table-expand">Expand</th>
                <th class="uk-width-small">Width Small</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Данные таблицы</td>
                <td>Содержимое ячейки</td>
                <td>Данные таблицы</td>
            </tr>
            <tr>
                <td>Данные ячейки</td>
                <td>Данные таблицы</td>
                <td>Содержимое ячейки</td>
            </tr>
        </tbody>
    </table>

Утилиты

Чтобы оптимизировать отображение ячеек таблицы и их конкретного содержимого, вы можете добавить один из следующих классов.

Класс Описание
.uk-table-link Чтобы связать (сделать ссылкой) всю ячейку, добавьте этот класс к элементу <th> или <td> и вставьте элемент <a>. Добавьте класс .uk-link-reset из компонента Ссылка, чтобы сбросить стиль ссылки по умолчанию.
.uk-preserve-width Так как изображения в UIkit 3 по умолчанию являются адаптивными, использование изображения внутри ячейки таблицы с классом .uk-table-shrink уменьшит ширину изображения до 0. Чтобы предотвратить это, добавьте класс .uk-preserve-width из компонента базовых стилей к элементу <img>.
.uk-text-truncate При применении фиксированной ширины к ячейке таблицы вы можете добавить этот класс из компонента Текст в элемент <td>, чтобы обрезать текст (текст обрезается и отображениется многоточие).
.uk-text-nowrap Добавьте этот класс из компонента Текст, чтобы предотвратить перенос текста, например, при использовании класса .uk-table-shrink.
<!-- Ссылка в таблице -->
<td class="uk-table-link">
    <a class="uk-link-reset" href=""></a>
</td>

<!-- Сохранение ширины -->
<td>
    <img class="uk-preserve-width">
</td>

<!-- Усечение текста -->
<td class="uk-text-truncate"></td>

<!-- Текст nowrap -->
<td class="uk-text-nowrap"></td>
  • Preserve Expand + Link Truncate Shrink + Nowrap
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. Lorem ipsum dolor
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. Lorem ipsum dolor
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. Lorem ipsum dolor
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. Lorem ipsum dolor
  • <div class="uk-overflow-auto">
        <table class="uk-table uk-table-hover uk-table-middle uk-table-divider">
            <thead>
                <tr>
                    <th class="uk-table-shrink"></th>
                    <th class="uk-table-shrink">Preserve</th>
                    <th class="uk-table-expand">Expand + Link</th>
                    <th class="uk-width-small">Truncate</th>
                    <th class="uk-table-shrink uk-text-nowrap">Shrink + Nowrap</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><input class="uk-checkbox" type="checkbox"></td>
                    <td><img class="uk-preserve-width uk-border-circle" src="/demo/img/avatar4.jpg" width="40" alt=""></td>
                    <td class="uk-table-link">
                        <a class="uk-link-reset" href="">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</a>
                    </td>
                    <td class="uk-text-truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</td>
                    <td class="uk-text-nowrap">Lorem ipsum dolor</td>
                </tr>
                <tr>
                    <td><input class="uk-checkbox" type="checkbox"></td>
                    <td><img class="uk-preserve-width uk-border-circle" src="/demo/img/avatar4.jpg" width="40" alt=""></td>
                    <td class="uk-table-link">
                        <a class="uk-link-reset" href="">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</a>
                    </td>
                    <td class="uk-text-truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</td>
                    <td class="uk-text-nowrap">Lorem ipsum dolor</td>
                </tr>
                <tr>
                    <td><input class="uk-checkbox" type="checkbox"></td>
                    <td><img class="uk-preserve-width uk-border-circle" src="/demo/img/avatar4.jpg" width="40" alt=""></td>
                    <td class="uk-table-link">
                        <a class="uk-link-reset" href="">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</a>
                    </td>
                    <td class="uk-text-truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</td>
                    <td class="uk-text-nowrap">Lorem ipsum dolor</td>
                </tr>
                <tr>
                    <td><input class="uk-checkbox" type="checkbox"></td>
                    <td><img class="uk-preserve-width uk-border-circle" src="/demo/img/avatar4.jpg" width="40" alt=""></td>
                    <td class="uk-table-link">
                        <a class="uk-link-reset" href="">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</a>
                    </td>
                    <td class="uk-text-truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</td>
                    <td class="uk-text-nowrap">Lorem ipsum dolor</td>
                </tr>
            </tbody>
        </table>
    </div>
Документация
Компоненты