Таблица
Легко создать прекрасно выглядящие таблицы, которые бывают разных стилей.
Использование
Для установки этого компонента, добавить .uk-table класс <table> элемент.
Пример
| Заголовок Таблицы | Заголовок Таблицы | Заголовок Таблицы |
|---|---|---|
| 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>