Содержание
Таблицы. Содержание · Bootstrap. Версия v4.0.0
Документация и примеры стилизации таблиц с элементами ввода (с учетом их широкого применения в плагинах JavaScript).
Примеры
Из-за широкого распространения таблиц в сторонних виджетах, таких как календари и «напоминалки», мы сделали так, что таблицы подключаются по согласию пользователя. Просто добавьте базовый класс .table в любой <table>, затем расширьте стилизацию за счет наших обычных классов, либо классов-модификаторов.
Вот так таблицы, основанные на классе .table, выглядят в базовой разметке таблиц в Bootstrap. Все стили таблиц в BS4 наследуются, что означает, что вложенные таблицы будут стилизованы как родительские.
| # | Имя | Фамилия | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
<table>
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Имя</th>
<th scope="col">Фамилия</th>
<th scope="col">Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
Вы можете инвертировать цвета со светлых на темные классом ..
table-dark
| # | Имя | Фамилия | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
<table>
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Имя</th>
<th scope="col">Фамилия</th>
<th scope="col">Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
Опции заголовка таблицы
По тому же принципу осветляйте или делайте серым заголовок таблицы <thead> с помощью классов .thead-light и .thead-dark.
| # | Имя | Фамилия | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
| # | Имя | Фамилия | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
<table>
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Имя</th>
<th scope="col">Фамилия</th>
<th scope="col">Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Имя</th>
<th scope="col">Фамилия</th>
<th scope="col">Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
Разделенные «полосами» ряды
Добавьте класс .table-striped к <tbody> для разделения «полосками зебры» рядов таблицы.
| # | Имя | Фамилия | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
<table>
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Имя</th>
<th scope="col">Фамилия</th>
<th scope="col">Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
| # | Имя | Фамилия | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
<table>
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Имя</th>
<th scope="col">Фамилия</th>
<th scope="col">Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
Таблица с границами
Добавьте класс .table-bordered в <table> для создания границ ячеек и таблицы со всех сторон.
| # | Имя | Фамилия | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Mark | Otto | @TwBootstrap |
| 3 | Jacob | Thornton | @fat |
| 4 | Larry the Bird | ||
<table>
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Имя</th>
<th scope="col">Фамилия</th>
<th scope="col">Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Mark</td>
<td>Otto</td>
<td>@TwBootstrap</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">4</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
| # | Имя | Фамилия | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Mark | Otto | @TwBootstrap |
| 3 | Jacob | Thornton | @fat |
| 4 | Larry the Bird | ||
<table>
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Имя</th>
<th scope="col">Фамилия</th>
<th scope="col">Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Mark</td>
<td>Otto</td>
<td>@TwBootstrap</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">4</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
Ряды с :hover
Добавьте класс .table-hover в <tbody> для активации :hover у рядов таблицы.
| # | Имя | Фамилия | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
<table>
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Имя</th>
<th scope="col">Фамилия</th>
<th scope="col">Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
| # | Имя | Фамилия | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
<table>
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Имя</th>
<th scope="col">Фамилия</th>
<th scope="col">Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
Маленькие таблицы
Добавьте класс .table-sm чтобы сделать таблицы компактнее урезанием паддинга ячкейки на 50%.
| # | Имя | Фамилия | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
<table>
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Имя</th>
<th scope="col">Фамилия</th>
<th scope="col">Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
| # | Имя | Фамилия | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
<table>
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Имя</th>
<th scope="col">Фамилия</th>
<th scope="col">Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
Контекстуальные классы
Используйте их для раскраски рядов или отдельных ячеек таблицы.
| Type | Заголовок колонки | Заголовок колонки |
|---|---|---|
| Активный (Active) | Ячейка | Ячейка |
| По умолчанию (Default) | Ячейка | Ячейка |
| Главный (Primary) | Ячейка | Ячейка |
| Второстепенный (Secondary) | Ячейка | Ячейка |
| Успех (Success) | Ячейка | Ячейка |
| Опасность (Danger) | Ячейка | Ячейка |
| Предупреждение (Warning) | Ячейка | Ячейка |
| Предупреждение (Info) | Ячейка | Ячейка |
| Светлый (Light) | Ячейка | Ячейка |
| Темный (Dark) | Ячейка | Ячейка |
<!-- On rows -->
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
<!-- On cells (`td` or `th`) -->
<tr>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>Варианты бэкграудна обычных таблиц недоступны с темной таблицей, но мы можете использовать текстовые или бэкграундные утилиты для достижения подобных стилей.
| # | Заголовок колонки | Заголовок колонки |
|---|---|---|
| 1 | Ячейка | Ячейка |
| 2 | Ячейка | Ячейка |
| 3 | Ячейка | Ячейка |
| 4 | Ячейка | Ячейка |
| 5 | Ячейка | Ячейка |
| 6 | Ячейка | Ячейка |
| 7 | Ячейка | Ячейка |
| 8 | Ячейка | Ячейка |
| 9 | Ячейка | Ячейка |
<!-- On rows -->
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
<!-- On cells (`td` or `th`) -->
<tr>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>Добавление информативности для технологии для инвалидов
Использование цвета как дополнительного инструмента информативности доступно только в визуальной сфере, что ограничивает пользователей ассистивных технологий, например, программ для чтения текста с экрана. Удостоверьтесь, что информация, обозначенная цветом, также доступна из самого контента (т.е. в тексте) или содержится в альтернативных средствах – таких как дополнительный скрытый в классе .sr-only текст.
Создавайте гибкие таблицы, обертывая любой .table с .table-responsive{-sm|-md|-lg|-xl}, заставляя таблицу прокручиваться горизонтально в каждой контрольной точке max-width получат ширину 575.99px, 767.99px, 991.99px и 1119.99 px, соответственно.
Обратите внимание, что поскольку браузеры в настоящее время не поддерживают запросы диапазона, мы используем ограничения минимальных min- и максимальных max- префиксов и видовых экранов с дробной шириной (что может произойти при определенных условиях на устройствах с высоким разрешением на дюйм, например), используя значения с более высоким точность для этих сравнений.
Надписи
Тэг <caption> — это нечто похожее на заголовок для таблицы. Он помогает пользователям программ для чтения с экрана обнаружить таблицу, оценить ее содержимое и ее ценность для чтения.
| # | Имя | Фамилия | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
<table>
<caption>Список пользователей</caption>
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Имя</th>
<th scope="col">Фамилия</th>
<th scope="col">Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
«Отзывчивые» таблицы
«Отзывчивые» таблицы позволяют таблицам прокручиваться горизонтально. Сделайте любую таблицу таковой для всех экранов и девайсов, добавив класс .table-responsive в класс .table. Или укажите максимальный брейкпойнт, на котором появится данное свойство таблицы, добавив класс .table-responsive{-sm|-md|-lg|-xl}.
Вертикальное обрезание/сокращение
«Отзывчивые» таблицы используют overflow-y: hidden, что «обрезает» любой контент, который существует ниже конца верхних краев таблицы. В частности, это может «срезать» выпадающие меню и другие сторонние виджеты.
Всегда «отзывчиво»
Через каждую контрольную точку используйте .table-responsive для горизонтально прокручиваемых таблиц.
| # | Заголовок таблицы | Заголовок таблицы | Заголовок таблицы | Заголовок таблицы | Заголовок таблицы | Заголовок таблицы | Заголовок таблицы | Заголовок таблицы | Заголовок таблицы |
|---|---|---|---|---|---|---|---|---|---|
| 1 | Ячейка | Ячейка | Ячейка | Ячейка | Ячейка | Ячейка | Ячейка | Ячейка | Ячейка |
| 2 | Ячейка | Ячейка | Ячейка | Ячейка | Ячейка | Ячейка | Ячейка | Ячейка | Ячейка |
| 3 | Ячейка | Ячейка | Ячейка | Ячейка | Ячейка | Ячейка | Ячейка | Ячейка | Ячейка |
<div>
<table>
...
</table>
</div>Специфика брейкпойнтов
Используйте класс .table-responsive{-sm|-md|-lg|-xl} когда необходимо создать отзывчивые до необходимого брейкпойнта таблицы. От него и выше таблицы будут вести себя как обычные таблицы и не будут прокручиваться горизонтально.
| # | Заголовок таблицы | Заголовок таблицы | Заголовок таблицы | Заголовок таблицы | Заголовок таблицы |
|---|---|---|---|---|---|
| 1 | Ячейка | Ячейка | Ячейка | Ячейка | Ячейка |
| 2 | Ячейка | Ячейка | Ячейка | Ячейка | Ячейка |
| 3 | Ячейка | Ячейка | Ячейка | Ячейка | Ячейка |
| # | Заголовок таблицы | Заголовок таблицы | Заголовок таблицы | Заголовок таблицы | Заголовок таблицы |
|---|---|---|---|---|---|
| 1 | Ячейка | Ячейка | Ячейка | Ячейка | Ячейка |
| 2 | Ячейка | Ячейка | Ячейка | Ячейка | Ячейка |
| 3 | Ячейка | Ячейка | Ячейка | Ячейка | Ячейка |
| # | Заголовок таблицы | Заголовок таблицы | Заголовок таблицы | Заголовок таблицы | Заголовок таблицы |
|---|---|---|---|---|---|
| 1 | Ячейка | Ячейка | Ячейка | Ячейка | Ячейка |
| 2 | Ячейка | Ячейка | Ячейка | Ячейка | Ячейка |
| 3 | Ячейка | Ячейка | Ячейка | Ячейка | Ячейка |
| # | Заголовок таблицы | Заголовок таблицы | Заголовок таблицы | Заголовок таблицы | Заголовок таблицы |
|---|---|---|---|---|---|
| 1 | Ячейка | Ячейка | Ячейка | Ячейка | Ячейка |
| 2 | Ячейка | Ячейка | Ячейка | Ячейка | Ячейка |
| 3 | Ячейка | Ячейка | Ячейка | Ячейка | Ячейка |
<div>
<table>
...
</table>
</div>
<div>
<table>
...
</table>
</div>
<div>
<table>
...
</table>
</div>
<div>
<table>
...
</table>
</div>Bootstrap: tr class «warning» не работает в striped-table
У меня есть таблица, определенная <table> с некоторыми строками, такими как <tr> , <tr> и <tr> .
Строки таблицы success и info отображаются нормально: красные и синие, как и должны быть. Но строки warning не показывают желтый цвет, как ожидалось. Они просто обычные, белые или серые, как зебра.
Странно то, что если я добавлю table-hover к классам таблицы, то строки warning будут отображаться желтым цветом, но только при наведении курсора. Однако строки success и info всегда показывают свои цвета, независимо от того, парят они или нет.
html
css
twitter-bootstrap
Поделиться
Источник
Jonathan
18 сентября 2013 в 04:49
4 ответа
14
Что касается этой проблемы с v3.0.3 (которая будет исправлена в v3.1, когда они ее выпустят), быстрое/грубое исправление для этого заключается в добавлении переопределений !important к некоторым конкретным CSS для этой проблемы:
.table-striped > tbody > tr > .danger,
.table-striped > tbody > .danger > td,
.table-striped > tbody > .danger > th {
background-color: #f2dede !important;
}
Очевидно , добавьте это для thead, tfoot и т. Д. И success , info и т. Д., Если вы их используете. Я использую только danger и только в tbody . Я поместил эти изменения в свой файл bootstrap.css, чтобы при обновлении до v3.1 он все равно обновился.
Поделиться
Robbie Averill
30 января 2014 в 01:33
5
Похоже, это известная ошибка в v3.0.3 и будет исправлена в v3.1.0
https://github.com/twbs/bootstrap/issues/11728
Сейчас я просто удалю class: table-striped, чтобы снова появились цвета.
Поделиться
Richard
11 декабря 2013 в 12:26
0
Связанная ошибка…
В Bootstrap 2.1.0″ tr.warning» был опущен, так что bootstrap.css был
.table tbody tr.success td {
background-color: #dff0d8;
}
.table tbody tr.error td {
background-color: #f2dede;
}
.table tbody tr.info td {
background-color: #d9edf7;
}
Но это должно выглядеть примерно так:
.table tbody tr.success td {
background-color: #dff0d8;
}
.table tbody tr.error td {
background-color: #f2dede;
}
.table tbody tr.info td {
background-color: #d9edf7;
}
.table tbody tr.warning td {
background-color: lightgoldenrodyellow;
}
Обратите внимание, что выбор цвета для «tr.warning» — это мой выбор, а не цвет начальной загрузки по умолчанию.
Поделиться
Dave Strickler
05 декабря 2014 в 14:24
0
Если вы используете LESS и создаете свой собственный bootstrap, я предлагаю добавить !important в bg-variant-mixin:
// Fix for known bug bg-variant, fixes issues with striped tables
.bg-variant(@color) {
background-color: @color !important;
a&:hover,
a&:focus {
background-color: darken(@color, 10%) !important;
}
}
Поделиться
olahell
07 сентября 2017 в 10:06
Похожие вопросы:
Как я могу улучшить контраст на bootstrap Zebra striped table
У меня есть следующая таблица twitter bootstrap с чередованием зебр: <table class=table table-striped> <thead> <tr> <th>Advantage</th> <th>Details</th>…
bootstrap table-striped in multiple tbody with double tr
Я был простым столом, и я использовал bootstrap и classes table и table-striped. Это хорошо работает. <h4>Old table</h4> <table class=table table-striped> <thead>…
Bootstrap CSS table-striped не работает с нокаутом при привязке
Допустим, у меня есть следующая таблица, которая работает с bootstrap css и knockout: <table style=cursor:pointer; class=table table-striped table-bordered table-hover table-condensed>…
Как я могу изменить Bootstrap table-striped менее специфичным способом?
Я хочу изменить цвета Bootstrap table-striped. Я прочитал этот вопрос: Bootstrap table striped: как изменить цвет фона полосы? . Так что я могу изменить его, например, с помощью: .table-striped >…
Twitter Bootstrap 3: Как уменьшить действие table-striped и table-hover до определенных столбцов в таблице?
Я хочу уменьшить влияние классов twitter bootstrap table-striped и table-hover до Столбцов 2 и 3. Есть ли способ сделать это? Вот пример того, как сейчас выглядит мой стол: <table class=table…
Bootstrap [3.3.4] — <table> Как правильно вытянуть правую ячейку <td>
Версия 3.3.4, похоже, улучшила работу pull-right внутри полосатого стола. <div class=table-responsive> <table class=table table-striped> <thead> <tr> <th>Column…
Попытка перезаписать Bootstrap table-striped color в LESS не применяется?
Я пытаюсь создать общий класс CSS в моем файле LESS, который наследуется от таблицы Bootstrap. Если я возьму значение по умолчанию, оно будет работать нормально, но я хотел бы изменить цвет…
Bootstrap Striped-table не работает с Vuejs
Я создаю компонент друзей, который перечисляет друзей пользователей на основе ответа от конечной точки. Я хочу визуализировать ответы в строки таблицы, как часть этого я хотел бы использовать класс…
Почему Bootstrap CSS class table-striped не работает в asp.net?
Я новичок в Asp.net и bootstrap. Я ссылался на bootstrap.min.css в своем html, и у меня есть элемент управления gridview, который я хочу стилизовать с помощью класса table table-striped. Visual…
Применение Bootstrap table-striped к динамической таблице не работает
Создание динамической таблицы, в которой pageList имеет переменную длину с каждым ответом. Попытка применить класс Bootstrap table-striped, однако этот стиль, похоже, не работает. Есть какие-нибудь…
Руководство Bootstrap 4 Tables — Hoow.ru
<
div itemprop=”articleBody”>
Bootstrap позволяет создавать красивые таблицы с помощью фреймворка CSS. В версии 4 есть несколько новых классов для инвертирования цвета таблицы и обеспечения адаптивности таблицы. В этом руководстве мы обсудим различные возможности создания таблиц Bootstrap 4.
Таблица Bootstrap 4 по умолчанию
В таблице начальной загрузки используются все теги таблицы HTML с заголовком внутри
и телом таблицы внутри тегов. В нашем примере давайте создадим простую таблицу оценок в формате таблицы с четырьмя именами учащихся (в строках) и пятью предметами со средним процентом (в столбцах). Ниже приведен код для таблицы Bootstrap по умолчанию.<!DOCTYPE html> <html lang="en"> <head> <!-- Meta Tags for Bootstrap 4 --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap 4 CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> </head> <body> <!-- Start of Table --> <table> <thead> <tr> <th>Student Name</th> <th>Sub1</th> <th>Sub2</th> <th>Sub3</th> <th>Sub4</th> <th>Sub5</th> <th>%</th> </tr> </thead> <tbody> <tr> <td>Thomas</td> <td>80</td> <td>90</td> <td>70</td> <td>80</td> <td>75</td> <td>79</td> </tr> <tr> <td>Peter</td> <td>100</td> <td>90</td> <td>68</td> <td>75</td> <td>89</td> <td>84.4</td> </tr> <tr> <td>John</td> <td>55</td> <td>43</td> <td>57</td> <td>76</td> <td>45</td> <td>55.2</td> </tr> <tr> <td>Kelly</td> <td>84</td> <td>76</td> <td>89</td> <td>76</td> <td>90</td> <td>83</td> </tr> </tbody> </table> <!-- End of Table --> <!-- Bootstrap 4 Scripts --> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh5U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> </body> </html>
По умолчанию единственный класс CSS, необходимый для создания таблицы Bootstrap, – это класс «table», применяемый непосредственно к элементу таблицы HTML. Вам не нужно создавать тег
<
div> для вставки таблиц в Bootstrap. Тег по умолчанию даст следующий результат:
Предлагает: Получите 97% скидку на конструктор сайтов Mobirise Bootstrap.
Инвертирование цветов таблицы
Bootstrap 4 позволяет вам инвертировать цвет вашей таблицы, добавляя «table-inverse» к тегу
<
table>. Фон будет темным, а текст – светлым. Код должен выглядеть так:
И наша таблица с отметками будет иметь черную строку заголовка, как показано ниже:
Это не все!!! С Bootstrap есть еще много возможностей. Создадим еще несколько вариаций.
Полосатый стол Bootstrap 4
Полосатая таблица позволяет создавать альтернативные цвета для строк. Просто добавьте «таблица с полосами» к существующему классу «таблица», и таблица будет иметь узор с полосами. Светло-серый цвет фона будет применен ко всем строкам с нечетными номерами, начиная с первой строки.
Полосатая таблица в основном предпочтительна для разделения строк и демонстрации контента посетителям.
Таблица с границами Bootstrap
Это просто добавит границу в таблицу по умолчанию. Что вам нужно, так это добавить класс «с рамкой таблицы» к существующему классу «таблица».
Наша таблица маркировки с рамкой должна выглядеть так:
Вы также можете легко создать таблицу с границами с полосами на строках.
Таблица с эффектами наведения на строки
Как насчет добавления эффектов наведения к вашей таблице? Класс «table-hover» сделает это за вас. Наведите указатель мыши на таблицу, чтобы увидеть, что соответствующая строка выделена светло-серым цветом фона.
Ниже показано, как ваша таблица должна выглядеть, когда вы наводите указатель мыши на вторую строку.
Адаптивная таблица начальной загрузки для устройств размером менее 768 пикселей
Создать адаптивную таблицу в Bootstrap 4 очень просто. Вам не нужно добавлять дополнительный
для повышения отзывчивости. Просто вставьте класс «реагирующий на таблицу», горизонтальная полоса прокрутки будет автоматически добавлена к таблице при просмотре в браузере с размером экрана ниже 768 пикселей.
Вот как будет выглядеть наша адаптивная таблица. Помните, что горизонтальная полоса прокрутки появится только тогда, когда таблица просматривается на экране размером менее 768 пикселей. В противном случае вы не найдете никакой разницы по сравнению с обычной таблицей Bootstrap.
Таблица начальной загрузки со сжатым текстом
Иногда бывает необходимо уменьшить высоту стола, чтобы уменьшить занимаемое пространство. Bootstrap позволяет сделать это, добавляя класс table-sm к существующему классу table, как показано ниже:
Это уберет набивку и уменьшит высоту стола.
Создание таблицы начальной загрузки с цветом фона
На данный момент мы обсудили создание простой таблицы или использование светло-серого фона по умолчанию для строк. Bootstrap также позволяет раскрашивать ячейки и строки таблицы, чтобы сделать ее красивой. Вы можете выделить любые строки или любые ячейки таблицы пятью разными цветами. Есть два набора классов CSS, которые помогут вам добавить цвета фона: один – это контекстные классы, а другой – вспомогательные классы фона. В таблице ниже описаны различные доступные варианты:
| Таблица контекстных классов | |
| таблица активна | Светло-серый цвет при наведении |
| таблица успеха | Светло-зеленый успех или позитивное действие |
| информация о таблице | Голубой для информационного сообщения |
| таблица-предупреждение | Светло-желтый для индикации предупреждения |
| опасность за столом | Светло-красный для обозначения опасности |
| таблица-первичный | Голубой для обозначения основного цвета в Bootstrap |
| стол вторичный | Светло-красный для обозначения опасности |
| настольная лампа | Светло-серый для обозначения отсутствия цвета |
| стол-темный | Светло-черный для обозначения темноты |
| Фоновая служебная программа / контекстные классы | |
| bg-primary | Средний синий как основной цвет |
| bg-успех | Зеленый лес для успеха |
| bg-предупреждение | Свобода слова зеленого цвета для предупреждения |
| bg-info | Светло-зеленый для информации |
| bg-опасность | Красный (Киноварь) для опасности |
| bg-light | Одиночество для света |
| bg-dark | Цвет Mirage для темноты |
| bg-вторичный | Цвет алюминия для вторичного |
Помните, что эти классы могут применяться к отдельным строкам и ячейкам таблицы Bootstrap в любой комбинации.
Предлагает: Получите 97% скидку на конструктор сайтов Mobirise Bootstrap.
Цветные строки с контекстными классами
Давайте применим контекстные классы в нашей таблице оценок, чтобы увидеть их в действии. Код ниже применяет класс «table-active» к первой строке таблицы, чтобы изменить цвет фона на светло-серый.
| Томас | 80 | 90 | 70 | 80 | 75 | 79 |
Ниже показано, как будет выглядеть полная таблица, когда вы примените классы «table-success», «table-warning» и «table-dangerous» ко второму, третьему и четвертому элементам
Цветные строки с цветами фона
Как и в случае с контекстными классами таблиц, вы можете применять цвета фона к строкам с помощью контекстных классов фона.
| Томас | 80 | 90 | 70 | 80 | 75 | 79 |
Ниже приведена привлекательная таблица, в которой к строкам применяются классы «bg-success», «bg-dangerous», «bg-warning», «bg-info» и другие служебные классы фона.
Цветные ячейки с контекстными классами
К каждой ячейке таблицы Bootstrap можно применить один из контекстных классов, чтобы выделить его из других ячеек. Это будет действительно полезно, когда у вас большая таблица и вы хотите выделить только несколько ячеек. Код ниже показывает применение контекстного класса «table-active» к ячейке таблицы.
| Томас | class = “table-active”> 80 | 90 | 70 | 80 | 75 | 79 |
В таблице ниже четыре ячейки с разными цветами фона применены случайным образом.
Цветные строки и ячейки с фоновыми цветами и контекстными классами
Наконец, вы можете применить контекстный класс таблицы и контекстный класс фона в любой комбинации, чтобы сделать разные цвета фона для строк и ячеек.
| Томас | class = “информация о таблице”> 80 | 90 | 70 | 80 | 75 | class = “bg-success”> 79 |
Вот как будет выглядеть примерная таблица с различными цветами, примененными к строкам и ячейкам.
Навигация по записям
Похожие записи
Прокрутить вверх
Bootstrap Бутстрап Таблицы
< Таблица > классы
Используйте классы ниже, чтобы стиль любой таблицы:
| Class | Description | |
|---|---|---|
| .table | Добавление базовой стилизации (светлые отступы и только горизонтальные разделители) в любую < таблицу > | |
| .table-striped | Добавляет Зебра-чередование в любую строку таблицы в пределах < tbody > (недоступно в IE8) | |
| .table-bordered | Добавляет границу со всех сторон таблицы и ячеек | |
| .table-hover | Включает состояние наведения в строках таблицы в < tbody > | |
| .table-condensed | Делает таблицу более компактной, сокращая прокладку ячеек пополам | |
| Объединение всех классов таблиц | ||
< TR >, < th > и < TD > классы
Используйте следующие классы для цветных строк или ячеек таблицы:
| Класс | Описание | |
|---|---|---|
| .active | Применение цвета наведения (светло-серого) к определенной строке или ячейке | |
| .success | Указывает на успешное или положительное действие | |
| .info | Указывает нейтральное информативное изменение или действие | |
| .warning | Указывает предупреждение, которое может потребоваться внимание | |
| .danger | Указывает на опасное или потенциально отрицательное действие |
Адаптивные таблицы
Класс, реагирующий на таблицы, создает адаптивную таблицу. Затем таблица будет прокручиваться по горизонтали на небольших устройствах (под 768px). При просмотре на что-либо больше, чем 768px широкий, нет никакой разницы:
Пример
<div>
<table>
…
</table>
</div>
Таблицы в Bootstrap 4 | WebReference
Bootstrap 4 добавил несколько новых классов таблиц, которые помогают создавать единообразно оформленные и адаптивные таблицы.
Базовая таблица
Для базовой таблицы, с небольшим padding у ячеек и горизонтальными разделителями, примените класс .table к элементу <table>.
<link rel=»stylesheet» href=»https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css»>
<table>
<thead>
<tr>
<th>Заголовок 1</th>
<th>Заголовок 2</th>
<th>Заголовок 3</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Подвал 1</th>
<th>Подвал 2</th>
<th>Подвал 3</th>
</tr>
</tfoot>
<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>
Тёмная таблица
Вы можете использовать класс .table-dark для инвертирования цветов, чтобы на тёмном фоне был светлый текст.
<link rel=»stylesheet» href=»https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css»>
<table>
<thead>
<tr>
<th>Заголовок 1</th>
<th>Заголовок 2</th>
<th>Заголовок 3</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Подвал 1</th>
<th>Подвал 2</th>
<th>Подвал 3</th>
</tr>
</tfoot>
<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>
Новое в Bootstrap 4
Тёмные таблицы являются новыми в Bootstrap 4.
Полосатая таблица
Для чередования фоновых цветов в строках добавьте класс .table-striped (оставляя при этом класс .table на месте).
<link rel=»stylesheet» href=»https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css»>
<table>
<thead>
<tr>
<th>Заголовок 1</th>
<th>Заголовок 2</th>
<th>Заголовок 3</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Подвал 1</th>
<th>Подвал 2</th>
<th>Подвал 3</th>
</tr>
</tfoot>
<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>
Таблица с обрамлением
Для границ по всей таблице используйте класс .table-borded (оставляя при этом класс .table на месте).
<link rel=»stylesheet» href=»https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css»>
<table>
<thead>
<tr>
<th>Заголовок 1</th>
<th>Заголовок 2</th>
<th>Заголовок 3</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Подвал 1</th>
<th>Подвал 2</th>
<th>Подвал 3</th>
</tr>
</tfoot>
<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>
Подсветка строк
Чтобы добиться эффекта «подсветки», когда курсор наводится на строки таблицы, используйте класс .table-hover (оставляя при этом класс .table на месте).
<link rel=»stylesheet» href=»https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css»>
<table>
<thead>
<tr>
<th>Заголовок 1</th>
<th>Заголовок 2</th>
<th>Заголовок 3</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Подвал 1</th>
<th>Подвал 2</th>
<th>Подвал 3</th>
</tr>
</tfoot>
<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>
Стили заголовка таблицы
Вы можете добавить фоновый цвет к элементу <thead> с помощью .thead-default или .thead-inverse.
Светлый
Используйте класс .thead-light.
<link rel=»stylesheet» href=»https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css»>
<table>
<thead>
<tr>
<th>Заголовок 1</th>
<th>Заголовок 2</th>
<th>Заголовок 3</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Подвал 1</th>
<th>Подвал 2</th>
<th>Подвал 3</th>
</tr>
</tfoot>
<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>
Тёмный
Используйте класс .thead-dark.
<link rel=»stylesheet» href=»https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css»>
<table>
<thead>
<tr>
<th>Заголовок 1</th>
<th>Заголовок 2</th>
<th>Заголовок 3</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Подвал 1</th>
<th>Подвал 2</th>
<th>Подвал 3</th>
</tr>
</tfoot>
<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>
Новое в Bootstrap 4
Стили заголовка таблицы являются новыми в Bootstrap 4.
Маленькие/сжатые таблицы
Если вы считаете, что в таблице слишком много отступов, то можете убрать их наполовину через класс .table-sm (оставляя при этом класс .table на месте).
<link rel=»stylesheet» href=»https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css»>
<table> <thead>
<tr>
<th>Заголовок 1</th>
<th>Заголовок 2</th>
<th>Заголовок 3</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Подвал 1</th>
<th>Подвал 2</th>
<th>Подвал 3</th>
</tr>
</tfoot>
<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>
Bootstrap 4 против Bootstrap 3
Обратите внимание, что Bootstrap 4 использует .table-sm для сжатия таблицы, а Bootstrap 3 использует .table-condensed. Оба уменьшают padding для ячеек вполовину.
Контекстные классы
Вы можете применить цвет к отдельным строкам или ячейкам с помощью пяти контекстных классов Bootstrap: .table-active, .table-success, .table-info, .table-warning и .table-danger.
<link rel=»stylesheet» href=»https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css»>
<table>
<thead>
<tr>
<th>Заголовок 1</th>
<th>Заголовок 2</th>
<th>Заголовок 3</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>
Bootstrap 4 против Bootstrap 3
Bootstrap 3 не задействует префикс .table- для своих контекстных классов. К примеру, Bootstrap 3 использует .active, тогда как Bootstrap 4 .table-active. Кроме этого, обе версии используют одни и те же пять контекстных ключевых слов (active, success, info, warning, danger).
Адаптивные таблицы
Адаптивные таблицы автоматически создают горизонтальную полосу прокрутки при просмотре на устройствах меньше заданной точки останова. Чтобы создать адаптивную таблицу, заключите таблицу в элемент <div> с классом .table-responsive (или один из классов .table-responseive-*).
<link rel=»stylesheet» href=»https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css»>
<div>
<table>
<thead>
<tr>
<th>Заголовок 1</th>
<th>Заголовок 2</th>
<th>Заголовок 3</th>
<th>Заголовок 4</th>
<th>Заголовок 5</th>
<th>Заголовок 6</th>
<th>Заголовок 7</th>
<th>Заголовок 8</th>
<th>Заголовок 9</th>
<th>Заголовок 10</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>
</tr>
<tr>
<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>
</tr>
</tbody>
</table>
</div>
Классы .table-responseive-* могут использоваться для указания конкретной точки останова. Это .table-response-sm, .table-response-md, .table-responseive-lg и .table-responseive-xl. С указанной точки останова и выше таблица будет вести себя обычно, а не прокручиваться горизонтально.
Класс .table-responseive эквивалентен .table-responseive-md.
Автор и редакторы
Автор: Йен Диксон
Последнее изменение: 11.03.2020
Редакторы: Влад Мержевич
Bootstrap 3 — Оформление HTML таблиц
На этом уроке Вы научитесь создавать HTML таблицы и оформлять их с помощью CSS классов платформы Twitter Bootstrap 3.
На веб-страницах таблицы используются для того, чтобы представить Ваши данные в виде двухмерной структуры, состоящей из строк, столбцов и ячеек.
Создание таблицы осуществляется посредством тегов языка HTML. После создания таблицы веб-разработчик переходит к её оформлению с помощью написания правил CSS. Данный процесс можно значительно упростить, используя большое количество готовых CSS классов платформы Twitter Bootstrap 3. Процесс оформления таблицы с помощью Twitter Bootstrap осуществляется путём добавления к таблице или к её различным частям (строке, ячейке) соответствующих классов. Задавая те или иные классы, Вы тем самым задаёте то или иное оформление таблицы.
Основы создания таблиц в HTML
Создание таблицы в HTML начинается с элемента table (<table>…</table>), внутри которого помещают шапку (<thead>…</thead>) и основное содержимое (<tbody>…</tbody>). Далее в элемент thead и tbody помещают строки (<tr>…</tr>). После этого в элементе tr (<tr>…</tr>) создают ячейки с помощью элементов td (<td>…</td>) и th (<th>…</th>), внутрь которых помещают содержимое, которое должно выводиться в этой ячейке. Элемент th (<th>…</th>) обычно используют в шапке, т.к. он придаёт жирное начертание тексту и выравнивает его по центру.
Для объединения ячеек по вертикали и горизонтали предназначены следующие атрибуты:
rowspan="N"— объединяетNячеек по вертикали;colspan="N"— объединяетNячеек по горизонтали.
Применять данные атрибуты можно для элементов td и th.
Например:
<table>
<thead>
<tr>
<th>Заголовок 1</th>
<th>Заголовок 2</th>
<th>Заголовок 3</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="3">Содержимое ячейки</td>
<td colspan="2">Содержимое ячейки</td>
</tr>
<tr>
<td>Содержимое ячейки</td>
<td>Содержимое ячейки</td>
</tr>
<tr>
<td>Содержимое ячейки</td>
<td rowspan="2">Содержимое ячейки</td>
</tr>
<tr>
<td colspan="2">Содержимое ячейки</td>
</tr>
</tbody>
</table>
Для указанания названия таблицы используется элемент caption (<caption>…</caption>), который размещается внутри элемента table сразу же после его открывающего тега.
<table>
<caption>
Название таблицы
</caption>
...
</table>
Оформление таблиц с помощью CSS классов Bootstrap
Базовое оформление таблиц
Для придания таблицы базового оформления необходимо добавить класс .table к элементу table:
<table> ... </table>
Например:
<table>
<thead>
<tr>
<th>№ п/п</th>
<th>Имя</th>
<th>Фамилия</th>
<th>E-mail</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Иван</td>
<td>Чмель</td>
<td>[email protected]</td>
</tr>
<tr>
<td>2</td>
<td>Петр</td>
<td>Щербаков</td>
<td>[email protected]</td>
</tr>
<tr>
<td>3</td>
<td>Юрий</td>
<td>Голов</td>
<td>[email protected]</td>
</tr>
</tbody>
</table>
Оформление таблиц по типу полос «зебры»
Для выделения нечётных строк основной части таблицы (<tbody>…</tbody>) с помощью тёмного фона добавьте дополнительно класс .table-striped к классу .table.
<table> ... </table>
Внимание: Для оформления таблиц по типу полос «зебры» в Twitter Bootstrap 3 используется селектор :nth-child, который не поддерживается в браузере Internet Explorer 8.
Например:
<table>
<thead>
<tr>
<th>№ п/п</th>
<th>Имя</th>
<th>Фамилия</th>
<th>E-mail</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Иван</td>
<td>Чмель</td>
<td>[email protected]</td>
</tr>
<tr>
<td>2</td>
<td>Петр</td>
<td>Щербаков</td>
<td>[email protected]</td>
</tr>
<tr>
<td>3</td>
<td>Юрий</td>
<td>Голов</td>
<td>[email protected]</td>
</tr>
</tbody>
</table>
Создание таблицы с границами
Также вы можете добавлять границы для всех ячеек таблицы, просто добавив дополнительный класс Bootstrap .table-bordered к базовому классу .table.
<table>
<thead>
<tr>
<th>№ п/п</th>
<th>Имя</th>
<th>Фамилия</th>
<th>E-mail</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Иван</td>
<td>Чмель</td>
<td>[email protected]</td>
</tr>
<tr>
<td>2</td>
<td>Петр</td>
<td>Щербаков</td>
<td>[email protected]</td>
</tr>
<tr>
<td>3</td>
<td>Юрий</td>
<td>Голов</td>
<td>[email protected]</td>
</tr>
</tbody>
</table>
Выше приведенный пример будет выглядеть примерно так:
| № п/п | Имя | Фамилия | |
|---|---|---|---|
| 1 | Иван | Чмель | [email protected] |
| 2 | Петр | Щербаков | [email protected] |
| 3 | Юрий | Голов | [email protected] |
Создание таблицы с интересным режимом (подсвечивание строк при наведении на них курсора)
Что бы включить подсвечивание строк таблицы, Вам необходимо добавить класс .table-hover к базовому классу .table элемента <table>.
<table>
<thead>
<tr>
<th>№ п/п</th>
<th>Имя</th>
<th>Фамилия</th>
<th>E-mail</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Иван</td>
<td>Чмель</td>
<td>[email protected]</td>
</tr>
<tr>
<td>2</td>
<td>Петр</td>
<td>Щербаков</td>
<td>[email protected]</td>
</tr>
<tr>
<td>3</td>
<td>Юрий</td>
<td>Голов</td>
<td>[email protected]</td>
</tr>
</tbody>
</table>
Выше приведенный пример будет выглядеть примерно так:
| № п/п | Имя | Фамилия | |
|---|---|---|---|
| 1 | Иван | Чмель | [email protected] |
| 2 | Петр | Щербаков | [email protected] |
| 3 | Юрий | Голов | [email protected] |
Создание сжатой или компактной таблицы
Вы можете также сделать свои таблицы более компактными посредством добавления дополнительного класса .table-condensed к базовому классу .table. Класс .table-condensed делает таблицу компактной за счет уменьшения отступов в ячейках наполовину.
<table>
<thead>
<tr>
<th>№ п/п</th>
<th>Имя</th>
<th>Фамилия</th>
<th>E-mail</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Иван</td>
<td>Чмель</td>
<td>[email protected]</td>
</tr>
<tr>
<td>2</td>
<td>Петр</td>
<td>Щербаков</td>
<td>[email protected]</td>
</tr>
<tr>
<td>3</td>
<td>Юрий</td>
<td>Голов</td>
<td>[email protected]</td>
</tr>
</tbody>
</table>
Выше приведенный пример будет выглядеть примерно так:
Дополнительные акцентные классы для строк таблицы
Существуют вспомогательные классы, которые позволяют выделить строку или отдельные ячейки различным цветом посредством окраски их фона.
<table>
<thead>
<tr>
<th>№ чека</th>
<th>Способ платежа</th>
<th>Дата платежа</th>
<th>Сумма</th>
</tr>
</thead>
<tbody>
<tr>
<td>2803</td>
<td>Наличные</td>
<td>04.08.2014</td>
<td>2005.00</td>
</tr>
<tr>
<td>2804</td>
<td>Карта VISA</td>
<td>04.08.2014</td>
<td>1270.00</td>
</tr>
<tr>
<td>2805</td>
<td>Наличные</td>
<td>05.08.2014</td>
<td>1356.50</td>
</tr>
<tr>
<td>2806</td>
<td>Наличные</td>
<td>05.08.2014</td>
<td>5200.05</td>
</tr>
<tr>
<td>2807</td>
<td>Карта VISA</td>
<td>06.08.2014</td>
<td>315.70</td>
</tr>
</tbody>
</table>
Вышеприведенный пример будет выглядеть примерно так:
Создание адаптивной таблицы с помощью Bootstrap
С помощью Twitter Bootstrap 3 Вы можете также создавать адаптивные таблицы, которые можно просматривать на маленьких устройствах (ширина экрана, у которых меньше 768px) с помощью полосы прокрутки. При просмотре адаптивных таблиц на других устройствах, имеющих экран шириной, больше чем 768px полоса прокрутки будет отсутствовать.
<div>
<table>
<thead>
<tr>
<th>№ п/п</th>
<th>Имя</th>
<th>Фамилия</th>
<th>E-mail</th>
<th>Увлечения</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Иван</td>
<td>Чмель</td>
<td>[email protected]</td>
<td>Плавание, бодибилдинг, боевые искусства</td>
</tr>
<tr>
<td>2</td>
<td>Петр</td>
<td>Щербаков</td>
<td>[email protected]</td>
<td>Европейские танцы, Стрип-денс, Ролики</td>
</tr>
<tr>
<td>3</td>
<td>Юрий</td>
<td>Голов</td>
<td>[email protected]</td>
<td>Горный велосипед, скейтборд, катание на квадрацикле</td>
</tr>
</tbody>
</table>
</div>
Табличные теги, поддерживаемые Twitter Bootstrap 3
В следующей таблице перечислены поддерживаемые табличные элементы HTML и их назначение.
| Тег | Описание |
|---|---|
| <table> | Контейнер для элементов, определяющих содержимое таблицы |
| <caption> | Заголовок таблицы |
| <thead> | Контейнер для элементов, формирующих «шапку» таблицы |
| <tbody> | Контейнер для элементов, формирующих основную часть таблицы |
| <tr> | Контейнер для ячеек, являющихся элементами одной строки |
| <th> | Специальная табличная ячейка для заголовков столбцов |
| <td> | Табличная ячейка, предназначенная для размещения основных табличных данных |
таблиц · Bootstrap
Документация и примеры для выбора стиля таблиц (учитывая их преобладающее использование в плагинах JavaScript) с помощью Bootstrap.
Примеры
В связи с широким использованием таблиц в сторонних виджетах, таких как календари и средства выбора даты, мы разработали наши таблицы для с подпиской . Просто добавьте базовый класс .table к любому
| # | Первая | Последняя | Ручка |
|---|---|---|---|
| 1 | Марка | Отто | @mdo |
| 2 | Иаков | Торнтон | @ жир |
| 3 | Ларри | Птица |
<таблица>
#
Первый
Последний
Дескриптор
1
Отметить
Отто
@mdo
2
Джейкоб
Торнтон
@fat
3
Ларри
Птица
@twitter
Вы также можете инвертировать цвета — светлый текст на темном фоне — с помощью .стол-тёмный .
| # | Первая | Последняя | Ручка |
|---|---|---|---|
| 1 | Марка | Отто | @mdo |
| 2 | Иаков | Торнтон | @ жир |
| 3 | Ларри | Птица |
<таблица>
#
Первый
Последний
Дескриптор
1
Отметить
Отто
@mdo
2
Джейкоб
Торнтон
@fat
3
Ларри
Птица
@twitter
Опции головки стола
Подобно таблицам и темным таблицам, используйте классы модификаторов .thead-light или .thead-dark , чтобы
| # | Первая | Последняя | Ручка |
|---|---|---|---|
| 1 | Марка | Отто | @mdo |
| 2 | Иаков | Торнтон | @ жир |
| 3 | Ларри | Птица |
| # | Первая | Последняя | Ручка |
|---|---|---|---|
| 1 | Марка | Отто | @mdo |
| 2 | Иаков | Торнтон | @ жир |
| 3 | Ларри | Птица |
<таблица>
#
Первый
Последний
Дескриптор
1
Отметить
Отто
@mdo
2
Джейкоб
Торнтон
@fat
3
Ларри
Птица
@twitter
<таблица>
#
Первый
Последний
Дескриптор
1
Отметить
Отто
@mdo
2
Джейкоб
Торнтон
@fat
3
Ларри
Птица
@twitter
Ряды полос
Используйте .table-striped , чтобы добавить полосатую полосу к любой строке таблицы в пределах
| # | Первая | Последняя | Ручка |
|---|---|---|---|
| 1 | Марка | Отто | @mdo |
| 2 | Иаков | Торнтон | @ жир |
| 3 | Ларри | Птица |
<таблица>
#
Первый
Последний
Дескриптор
1
Отметить
Отто
@mdo
2
Джейкоб
Торнтон
@fat
3
Ларри
Птица
@twitter
| # | Первая | Последняя | Ручка |
|---|---|---|---|
| 1 | Марка | Отто | @mdo |
| 2 | Иаков | Торнтон | @ жир |
| 3 | Ларри | Птица |
<таблица>
#
Первый
Последний
Дескриптор
1
Отметить
Отто
@mdo
2
Джейкоб
Торнтон
@fat
3
Ларри
Птица
@twitter
Стол с бортиком
Добавьте . с границами таблицы для границ со всех сторон таблицы и ячеек.
| # | Первая | Последняя | Ручка |
|---|---|---|---|
| 1 | Марка | Отто | @mdo |
| 2 | Иаков | Торнтон | @ жир |
| 3 | Птица Ларри | ||
<таблица>
#
Первый
Последний
Дескриптор
1
Отметить
Отто
@mdo
2
Джейкоб
Торнтон
@fat
3
Птица Ларри
@twitter
| # | Первая | Последняя | Ручка |
|---|---|---|---|
| 1 | Марка | Отто | @mdo |
| 2 | Иаков | Торнтон | @ жир |
| 3 | Птица Ларри | ||
<таблица>
#
Первый
Последний
Дескриптор
1
Отметить
Отто
@mdo
2
Джейкоб
Торнтон
@fat
3
Птица Ларри
@twitter
Подъемные ряды
Добавьте .table-hover , чтобы включить состояние наведения курсора на строки таблицы в пределах
| # | Первая | Последняя | Ручка |
|---|---|---|---|
| 1 | Марка | Отто | @mdo |
| 2 | Иаков | Торнтон | @ жир |
| 3 | Птица Ларри | ||
<таблица>
#
Первый
Последний
Дескриптор
1
Отметить
Отто
@mdo
2
Джейкоб
Торнтон
@fat
3
Птица Ларри
@twitter
| # | Первая | Последняя | Ручка |
|---|---|---|---|
| 1 | Марка | Отто | @mdo |
| 2 | Иаков | Торнтон | @ жир |
| 3 | Птица Ларри | ||
<таблица>
#
Первый
Последний
Дескриптор
1
Отметить
Отто
@mdo
2
Джейкоб
Торнтон
@fat
3
Птица Ларри
@twitter
Маленький стол
Добавьте .table-sm , чтобы сделать столы более компактными, разрезая заполнение ячеек пополам.
| # | Первая | Последняя | Ручка |
|---|---|---|---|
| 1 | Марка | Отто | @mdo |
| 2 | Иаков | Торнтон | @ жир |
| 3 | Птица Ларри | ||
<таблица>
#
Первый
Последний
Дескриптор
1
Отметить
Отто
@mdo
2
Джейкоб
Торнтон
@fat
3
Птица Ларри
@twitter
| # | Первая | Последняя | Ручка |
|---|---|---|---|
| 1 | Марка | Отто | @mdo |
| 2 | Иаков | Торнтон | @ жир |
| 3 | Птица Ларри | ||
<таблица>
#
Первый
Последний
Дескриптор
1
Отметить
Отто
@mdo
2
Джейкоб
Торнтон
@fat
3
Птица Ларри
@twitter
Контекстные классы
Используйте контекстные классы для раскрашивания строк таблицы или отдельных ячеек.
| Класс | Заголовок | Заголовок |
|---|---|---|
| Активный | Ячейка | Ячейка |
| По умолчанию | Ячейка | Ячейка |
| Первичный | Ячейка | Ячейка |
| Вторичный | Ячейка | Ячейка |
| Успех | Ячейка | Ячейка |
| Опасность | Ячейка | Ячейка |
| Предупреждение | Ячейка | Ячейка |
| Информация | Ячейка | Ячейка |
| Свет | Ячейка | Ячейка |
| Темный | Ячейка | Ячейка |
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
Обычные варианты фона таблицы недоступны для темной таблицы, однако вы можете использовать текстовые или фоновые утилиты для достижения аналогичных стилей.
| # | Заголовок | Заголовок |
|---|---|---|
| 1 | Ячейка | Ячейка |
| 2 | Ячейка | Ячейка |
| 3 | Ячейка | Ячейка |
| 4 | Ячейка | Ячейка |
| 5 | Ячейка | Ячейка |
| 6 | Ячейка | Ячейка |
| 7 | Ячейка | Ячейка |
| 8 | Ячейка | Ячейка |
| 9 | Ячейка | Ячейка |
...
...
...
...
...
...
...
...
...
...
Передача смысла вспомогательным технологиям
Использование цвета для добавления смысла обеспечивает только визуальную индикацию, которая не будет передана пользователям вспомогательных технологий, таких как программы чтения с экрана.Убедитесь, что информация, обозначенная цветом, либо очевидна из самого содержимого (например, видимый текст), либо включена с помощью альтернативных средств, таких как дополнительный текст, скрытый с помощью класса .sr-only .
Создайте адаптивные таблицы, заключив любую .table в оболочку .table-responsive {-sm | -md | -lg | -xl} , заставляя таблицу прокручиваться по горизонтали при каждой максимальной ширине контрольной точки до (но не включая) 576 пикселей, 768 пикселей, 992 пикселей и 1120 пикселей соответственно.
Обратите внимание, что, поскольку браузеры в настоящее время не поддерживают запросы контекста диапазона, мы обходим ограничения префиксов min- и max- и области просмотра с дробной шириной (что может происходить при определенных условиях, например, на устройствах с высоким разрешением) за счет использования значений с более высокой точностью для этих сравнений.
Подписи
| # | Первая | Последняя | Ручка |
|---|---|---|---|
| 1 | Марка | Отто | @mdo |
| 2 | Иаков | Торнтон | @ жир |
| 3 | Ларри | Птица |
<таблица>
Список пользователей
#
Первый
Последний
Дескриптор
1
Отметить
Отто
@mdo
2
Джейкоб
Торнтон
@fat
3
Ларри
Птица
@twitter
Адаптивные таблицы
Адаптивные таблицы позволяют легко прокручивать таблицы по горизонтали.Сделайте любую таблицу адаптивной во всех окнах просмотра, заключив .table в .table-responsive . Или выберите максимальную точку останова, до которой будет реагировать таблица, используя .table-responsive {-sm | -md | -lg | -xl} .
Вертикальная обрезка / усечение
Адаптивные таблицы используют overflow-y: hidden , который отсекает любое содержимое, выходящее за пределы нижнего или верхнего края таблицы. В частности, это может вырезать раскрывающиеся меню и другие сторонние виджеты.
Всегда отзывчивый
Для каждой точки останова используйте .table-responsive для горизонтальной прокрутки таблиц.
| # | Заголовок | Заголовок | Заголовок | Заголовок | Заголовок | Заголовок | Заголовок | Заголовок | Заголовок |
|---|---|---|---|---|---|---|---|---|---|
| 1 | Ячейка | Ячейка | Ячейка | Ячейка | Ячейка | Ячейка | Ячейка | Ячейка | Ячейка |
| 2 | Ячейка | Ячейка | Ячейка | Ячейка | Ячейка | Ячейка | Ячейка | Ячейка | Ячейка |
| 3 | Ячейка | Ячейка | Ячейка | Ячейка | Ячейка | Ячейка | Ячейка | Ячейка | Ячейка |
<таблица>
...
Зависит от точки останова
Используйте .table-responsive {-sm | -md | -lg | -xl} по мере необходимости, чтобы создать адаптивные таблицы до определенной точки останова. С этой точки останова и выше таблица будет вести себя нормально и не будет прокручиваться по горизонтали.
| # | Заголовок | Заголовок | Заголовок | Заголовок | Заголовок |
|---|---|---|---|---|---|
| 1 | Ячейка | Ячейка | Ячейка | Ячейка | Ячейка |
| 2 | Ячейка | Ячейка | Ячейка | Ячейка | Ячейка |
| 3 | Ячейка | Ячейка | Ячейка | Ячейка | Ячейка |
| # | Заголовок | Заголовок | Заголовок | Заголовок | Заголовок |
|---|---|---|---|---|---|
| 1 | Ячейка | Ячейка | Ячейка | Ячейка | Ячейка |
| 2 | Ячейка | Ячейка | Ячейка | Ячейка | Ячейка |
| 3 | Ячейка | Ячейка | Ячейка | Ячейка | Ячейка |
| # | Заголовок | Заголовок | Заголовок | Заголовок | Заголовок |
|---|---|---|---|---|---|
| 1 | Ячейка | Ячейка | Ячейка | Ячейка | Ячейка |
| 2 | Ячейка | Ячейка | Ячейка | Ячейка | Ячейка |
| 3 | Ячейка | Ячейка | Ячейка | Ячейка | Ячейка |
| # | Заголовок | Заголовок | Заголовок | Заголовок | Заголовок |
|---|---|---|---|---|---|
| 1 | Ячейка | Ячейка | Ячейка | Ячейка | Ячейка |
| 2 | Ячейка | Ячейка | Ячейка | Ячейка | Ячейка |
| 3 | Ячейка | Ячейка | Ячейка | Ячейка | Ячейка |
<таблица>
...
<таблица>
...
<таблица>
...
<таблица>
...
Bootstrap CSS Tables Reference
<таблица> Классы
Используйте классы ниже для стилизации любой таблицы:
| Класс | Описание | Пример | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| .стол | Добавляет базовый стиль (световые отступы и только горизонтальные разделители) к любому
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| и | Классы Используйте классы ниже, чтобы раскрасить строки или ячейки таблицы:
Адаптивные таблицы.table-responseive класс создает адаптивную таблицу. После этого таблица ПримерПопробуй сам » Таблицы начальной загрузкиБазовая таблица начальной загрузкиБазовый стол Bootstrap имеет легкую обивку и только горизонтальные разделители. Класс Пример
Попробуй сам » полосатые ряды Модель Пример
Попробуй сам » Стол с рамкой Модель Пример
Попробуй сам » Hover Rows Модель Пример
Попробуй сам » Сводная таблица Модель Пример
Попробуй сам » Контекстные классы Контекстные классы могут использоваться для раскрашивания строк таблицы ( | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
):Пример
Попробуй сам » Можно использовать следующие контекстные классы:
Адаптивные таблицы Класс Пример <таблица> … | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Попробуй сам »
Полная ссылка на таблицу начальной загрузки
Чтобы получить полную информацию обо всех классах таблиц, перейдите в нашу полную
Справочник по таблицам начальной загрузки.
Пошаговое руководство по элементу таблицы CSS Bootstrap [+ 7 примеров, которые можно использовать]
Очень важен способ организации содержимого на веб-сайте.
Существует ряд дизайнерских стратегий, которые вы можете реализовать, чтобы сделать ваш контент более читабельным.Вы можете использовать изображения и / или пробелы, чтобы разбивать большие фрагменты текста. Вы можете использовать типографику, изменяя размер шрифта или интервал между словами или иным образом располагая текст на странице. Вы также можете использовать таблицы.
Таблицы
эффективны для организации и представления контента таким образом, чтобы читатели могли легко сканировать и быстро воспринимать большие объемы данных.
В блогах HubSpot иногда можно встретить таблицы, в которых суммируются основные выводы из сообщений блога. Посмотрите таблицу в конце этого Wix vs.Например, запись WordPress.
Хотя эта таблица была создана в CMS Hub, CMS HubSpot, вы можете создавать аналогичные таблицы с нуля с помощью HTML и CSS. Однако без использования платформы, ориентированной на мобильные устройства, трудно добиться, чтобы эти таблицы хорошо смотрелись как на настольных, так и на мобильных устройствах.
Вот почему в этом посте мы рассмотрим, как создать и стилизовать простой элемент таблицы в CSS-фреймворке Bootstrap CSS, чтобы вы могли добавлять адаптивные таблицы на страницы и сообщения в блогах на своем сайте.Давайте начнем.
Таблица начальной загрузки CSS
Как и многие другие вещи в Bootstrap, создать таблицу очень просто. Просто добавьте класс .table к любому элементу
| № | Имя | Символ | Атомный вес |
|---|---|---|---|
| 1 | Водород | H | 1.008 |
| 2 | Гелий | Он | 4,003 |
| 3 | Литий | Ли | 6.941 |
Обратите внимание, что этот фрагмент можно разделить на две основные части: разделы
| № | Имя | Символ | Атомный вес | - | - | - |
|---|---|---|---|---|---|---|
| 1 | Водород | H | 1.008 | Н / Д | Н / Д | Н / Д |
| 2 | Гелий | Он | 4,003 | Н / Д | Н / Д | Н / Д |
| 3 | Литий | Ли | 6.941 | Н / Д | Н / Д | Н / Д |
Вы также можете заставить таблицы реагировать на разные определенные области просмотра, а не на все окна просмотра, выбрав максимальную точку останова, при которой ваша таблица может прокручиваться по горизонтали.
Например, если вы хотите, чтобы ваша таблица прокручивалась по горизонтали до 576 пикселей, вы должны использовать .table-responsive-sm класс модификатора. 768px, 992px и 1120px — соответствующие контрольные точки максимальной ширины для .table-responsive {-md | -lg | -xl} .
2. Темная таблица начальной загрузки
Цвет по умолчанию для класса таблицы Bootstrap может не соответствовать вашей торговой марке или цветовой схеме. В этом случае вы можете использовать класс модификатора .table-dark , чтобы инвертировать цвета, чтобы цвет фона был темным, а текст — светлым. Это будет выглядеть примерно так:
Чтобы создать эту таблицу, просто добавьте «table-dark» после .стол кл. Вы можете увидеть это дополнение в первой строке кода, которое является единственным отличием этой разметки от базовой разметки таблицы.
<таблица>
№
Имя
Символ
Атомный вес
<тело>
1
Водород
H
1.008
2
Гелий
Он
4,003
3
Литий
Ли
6.941
3. Стол для начальной загрузки с цветной головкой
Если вы хотите изменить цвет только заголовка таблицы и оставить тело как есть, вы можете использовать классы модификаторов .thead-dark или .thead-light . .thead-dark сделает его темно-серым (как показано в примере ниже), а .thead-light сделает его светло-серым.
Источник
Если в предыдущем примере вы применили класс-модификатор к элементу
| № | Имя | Символ | Атомный вес |
|---|---|---|---|
| 1 | Водород | H | 1.008 |
| 2 | Гелий | Он | 4,003 |
| 3 | Литий | Ли | 6.941 |
4. Таблица начальной загрузки с полосатыми рядами
Допустим, вы хотите изменить стиль раздела тела таблицы, а не раздела заголовка. Используя класс модификатора .table-striped , вы можете добавить цвет к каждой второй строке в разделе
. Это даст эффект «полосатой зебры», как показано ниже.Чтобы создать эту таблицу, просто добавьте «table-striped» после .стол кл. Это практически тот же процесс, что и при создании темного стола. Вот код:
<таблица>
№
Имя
Символ
Атомный вес
<тело>
1
Водород
H
1.008
2
Гелий
Он
4,003
3
Литий
Ли
6.941
5. Таблица начальной загрузки с перемещаемыми строками
Теперь предположим, что вы хотите, чтобы стиль строк изменялся только тогда, когда посетитель наводит на них курсор. Используя класс модификатора .table-hover , вы можете включить состояние наведения курсора на строки таблицы в разделе
. Вы можете увидеть эффект в демонстрации ниже.Источник
Чтобы создать эту таблицу, просто добавьте «table-hover» после .стол кл. Это практически тот же процесс создания темного или полосатого стола. Вот код:
<таблица>
№
Имя
Символ
Атомный вес
<тело>
1
Водород
H
1.008
2
Гелий
Он
4,003
3
Литий
Ли
6.941
6. Таблица начальной загрузки с цветными строками
С помощью Bootstrap вы также можете изменить цвет строк или ячеек с помощью контекстных классов. Для этого вы можете применить следующие классы к
- Стол-первичный
- Стол вторичный
- Стол-успех
- Стол-опасность
- Таблица-предупреждение
- Информация о таблице
- Настольный светильник
- Стол тёмный
Я могу применить любой из вышеперечисленных классов к разным строкам, чтобы моя таблица выглядела примерно так:
Вот код для создания этой разноцветной таблицы.
<таблица>
№
Имя
Символ
Атомный вес
<тело>
1
Водород
H
1.008
2
Гелий
Он
4,003
3
Литий
Ли
6.941
7. Таблица начальной загрузки с границами
Если вы хотите иметь границы со всех сторон таблицы, а не только горизонтальные разделители, вы можете использовать класс модификаторов .table-Bordered .
Чтобы создать эту таблицу, просто добавьте «table-Bordered» после класса .table . Это практически тот же процесс, что и для создания темной таблицы, таблицы с полосами или таблицы с перемещаемыми строками.Вот код:
<таблица>
№
Имя
Символ
Атомный вес
<тело>
1
Водород
H
1.008
2
Гелий
Он
4,003
3
Литий
Ли
6.941
Если вы хотите удалить все границы, вы можете использовать класс модификатора .table-borderless .
Добавление таблиц начальной загрузки на ваш сайт
Таблицы
могут помочь организовать большие объемы данных на вашем сайте таким образом, чтобы их было легко читать и усваивать посетителям. Любой из примеров таблиц, описанных выше, можно добавить и настроить для вашего уникального сайта Bootstrap.Для начала вам просто нужно немного познакомиться с HTML и CSS.
Таблица начальной загрузки Css
Обзор
Таблицы присутствуют почти во всех приложениях (веб-приложениях, настольных компьютерах или мобильных приложениях) и являются важным элементом при отображении записей для конечного пользователя. Таблицы HTML фактически используются для представления материала в виде структуры, например строк и столбцов. Используя фреймворк Bootstrap 4, вы можете легко улучшить привлекательность таблицы.
В наши дни, учитывая важность, которую имеет пользовательский интерфейс, понимание того, как повысить привлекательность Bootstrap Table Responsive, становится столь же актуальным, как и есть. В этом сценарии одной из технологий, которые стали эталоном, является Bootstrap. Эта интерфейсная структура, наряду с множеством других функций, предоставляет множество функций для стилизации и оптимизации отображения различных элементов, таких как таблицы.
Базовая таблица в Bootstrap
Чтобы отформатировать таблицу с помощью Bootstrap, просто включите класс таблицы в тег
| # | Имя | Фамилия | Имя пользователя |
|---|---|---|---|
| 1 | Отметить | Отто | @mdo |
| 2 | Джейкоб | Торнтон | @fat |
| 3 | Ларри | Птица |
Обратные столы.
Одна из новых таблиц в Bootsrap 4 — это обратные таблицы. Class .table-inverse может изменить окраску таблицы.
<таблица>
#
Имя
Фамилия
Имя пользователя
1
Отметить
Отто
@mdo
2
Джейкоб
Торнтон
@fat
3
Ларри
Птица
@twitter
Дополнительные занятия
Для таблиц также есть несколько классов, которые позволяют использовать различные конструкции для таблиц, это:
● table-striped Переключает цветовой тон строк таблицы;
● с рамкой таблицы Добавляет границу к таблице;
● table-hover Включает выделение строки цен Bootstrap Table при наведении на нее курсора мыши;
● table-condensed Уменьшает высоту строк таблицы, делая ее более компактной.
Чтобы добавить все эти дизайны, просто добавьте нужные классы в:
| # | Имя | Фамилия | Имя пользователя |
|---|---|---|---|
| 1 | Отметить | Отто | @mdo |
| 2 | Джейкоб | Торнтон | @fat |
| 3 | Ларри | Птица |
Ряды полос
Полоски, похожие на зебру, можно носить с .стол полосатый класс, хороший пример
<таблица>
#
Имя
Фамилия
Имя пользователя
1
Отметить
Отто
@mdo
2
Джейкоб
Торнтон
@fat
3
Ларри
Птица
@twitter
Hover Rows
Чтобы создать побочный эффект наведения в строках таблицы, включите .стол-парение класс:
<таблица>
#
Имя
Фамилия
Имя пользователя
1
Отметить
Отто
@mdo
2
Джейкоб
Торнтон
@fat
3
Птица Ларри
@twitter
Стол с рамкой
У вас есть возможность добавить границы на каждом слайде таблицы и в ячейке с .со столешницей класс:
<таблица>
#
Имя
Фамилия
Имя пользователя
1
Отметить
Отто
@mdo
2
Отметить
Отто
@TwBootstrap
3
Джейкоб
Торнтон
@fat
4
Птица Ларри
@twitter
Короткий стол
Если вы хотите сделать свою таблицу более компактной — в этом случае вы можете сократить заполнение ячеек вдвое, используя этот класс: .Сжатый стол .
Имейте в виду, что в то время как Bootstrap 4 использует .table-sm для сжатия таблицы, Bootstrap 3 использует .table-condensed . Оба одинаково сокращают заполнение ячеек пополам.
<таблица>
#
Имя
Фамилия
Имя пользователя
1
Отметить
Отто
@mdo
2
Джейкоб
Торнтон
@fat
3
Птица Ларри
@twitter
Контекстные классы таблицы начальной загрузки Css
Используйте контекстные классы для раскрашивания ячеек таблицы (
):
...
...
...
...
...
...
...
...
...
...
Изменение строк таблицы Bootstrap 3 не использует префикс .table- для своих контекстных классов. Например, Bootstrap 3 использует .active , тогда как Bootstrap 4 использует .активный стол . Помимо этого, каждая из версий работает с одними и теми же 5 контекстными ключевыми словами (активный, успех, информация, предупреждение, опасность). Ниже вы можете увидеть информацию о каждом возможном варианте:
● активный: применяет цвет фокуса к строке таблицы или ячейке таблицы
● успех: указывает на положительное или успешное действие
● info: указывает на нейтральное изменение информации или действие.
● предупреждение: означает уведомление о том, что вам может потребоваться внимание.
● опасность: указывает на опасное или потенциально отрицательное действие.
Адаптивные таблицы
Для создания адаптивной таблицы используйте .настольно-отзывчивый класс. Таблица прокручивается в горизонтальном положении на устройствах менее 768 пикселей. Если размер гаджета больше 768 пикселей в ширину, то вы не увидите разницы:
Bootstrap 4 позволяет добавить класс .table-responsive к фактическому элементу
. Таблицы Bootstrap 3 требовали, чтобы вы добавили этот класс к родительскому элементу. Просмотрите несколько онлайн-видеоуроков по таблицам Bootstrap 4
Связанные темы:
Таблицы начальной загрузки: официальная документация
W3schools: учебное пособие по таблицам начальной загрузки
Лекция по таблицам начальной загрузки
Самые полезные таблицы начальной загрузки, которые вы можете загрузить и использовать
Макеты веб-сайтов имеют решающее значение для организации информации в легко читаемом формате.Если вы можете настроить удобный для чтения макет, у вас больше шансов привлечь гостей на свой сайт. Таблицы — один из таких способов организации информации в удобном для чтения формате.
Узнайте больше об этой теме в этой статье, созданной нашей командой на сайте wpDataTables.
Основы таблиц начальной загрузки
Таблицы
позволяют взять большой объем текста и организовать его в удобочитаемом формате.
Таблицы
Bootstrap обладают дополнительными преимуществами, такими как различные стили таблиц и скорость реагирования.Обычно таблицы начальной загрузки используются на веб-сайтах и в приложениях для четкого отображения и организации информации, поэтому выбирайте таблицы начальной загрузки, если вы хотите четкое, упорядоченное и стильное представление информации.
Большинство приложений используют таблицы, хотя мы не всегда можем распознать их как таковые. Они являются ключом к тому, как мы показываем данные посетителям нашего сайта. Таблицы HTML чаще всего используются для отображения текста в строках и столбцах. Фреймворк Bootstrap 4 может улучшить внешний вид вашей начальной HTML-таблицы.
Классы таблиц
Можно использовать различные классы таблиц начальной загрузки, чтобы придать вашей таблице более стильный вид.К ним относятся:
- Граница: добавьте границу со словом «таблица с рамкой»
- Цвета: добавьте цвет в разные строки с помощью «таблицы с полосами»
- Condense: сделайте ваши строки более компактными с помощью «table-condensed»
- Hover: выделение строки таблицы с возможностью сортировки при наведении курсора на «table-hover»
Лучшие таблицы начальной загрузки, которые вы можете скачать
Таблица начальной загрузки от Creative Tim
Таблица с фиксированным столбцом
Хранение всего текста и статистики в одной таблице может быть проблемой.Если информации много, посетителям потребуется прокрутить, чтобы увидеть всю таблицу. Макет таблицы с фиксированными столбцами сохраняет фиксированный столбец, и вы можете горизонтально прокручивать другие поля, поэтому
, это дает возможность добавить много текста начальной загрузки в столбец без изменения общего вида. Он полностью настраиваемый, что позволяет использовать любые цвета по вашему выбору или создать адаптивную таблицу и при необходимости добавить строки.
Статическая таблица Bootstrap 4 с флажками и фиксированным заголовком
Адаптивный стол
Этот дизайн стола исключительно чистый и гладкий, он превращает однотонный стол в нечто гораздо более привлекательное.Он имеет множество настраиваемых функций, поэтому вы можете изменить его так, как хотите.
Таблица цен на Bootstrap 4 Business с использованием HTML и CSS
Таблица начальной загрузки
Эта таблица начальной загрузки является расширенной версией таблицы, которая интегрируется со многими фреймворками CSS. Он поддерживает Material Design, Bootstrap, Bulma, Semandic UI и Foundation. Вы можете установить его с помощью npm или yarn, используя исходные файлы JavaScript Bootstrap Table и CSS.
Таблица начальной загрузки с фиксированным заголовком и прокручиваемым телом
Таблица Fresh Bootstrap
Fresh Bootstrap Table предлагает изменяемые параметры в соответствии с внешним видом вашего сайта, предлагая 2 версии и 5 цветов. Первая версия имеет цветной заголовок, а вторая версия имеет цветной фон. Предварительный просмотр в реальном времени позволяет изучить все стильные варианты.
Элегантная таблица цен
Если вы хотите увидеть больше подобных, ознакомьтесь с нашей статьей о таблицах цен.
Адаптивный стол
Администратор
Adminator — это шаблон панели инструментов с множеством заранее разработанных элементов, что упрощает настройку на вашем веб-сайте. Этот шаблон предоставляет таблицу данных, а также интерактивные диаграммы. Визуальный способ просмотра данных может быть полезен для зрителя.
Эту адаптивную таблицу начальной загрузки можно использовать для поиска, сортировки и настройки отображения, а под таблицей зритель может перейти к нужной странице.
Эти предварительно разработанные части таблицы выглядят по-настоящему профессионально, поэтому вы можете сосредоточиться на настройке таблицы начальной загрузки в соответствии с вашим сайтом.
Стол с индикатором выполнения
Bootstrap 4 Таблица командных очков
Поиск в таблице начальной загрузки
Таблица с фиксированным заголовком
Таблица с фиксированным заголовком
имеет множество вариантов стилей, поэтому вы можете настроить ее, выбрав уникальное сочетание стилей и цветов.Он имеет закругленные углы, чтобы добавить глубины и интереса, а фиксированный раздел заголовка особенно полезен для тех, кто ищет этот вариант.
Разнообразие темной тематики выглядит невероятно на сайтах с черной тематикой. В вариантах нет границы столбца, что позволяет добавлять столько контента, сколько вам нужно, не прерываясь. Столбцы просто подстраиваются под себя, чтобы таблица выглядела впечатляюще.
Bootstrap 4 Базовый стол с картой
СРТДэш
SRTDash предлагает три стиля оформления таблиц начальной загрузки, каждый из которых остается неизменным, меняется только внешний вид.У каждого есть фиксированный заголовок со стрелками для сортировки параметров рядом с заголовками.
В правом верхнем углу есть раскрывающийся список, в котором вы можете изменить плотность отображения, то есть количество строк, которые посетитель видит за раз. Если в нем много строк, пользователи могут выровнять плотность отображения для облегчения чтения.
Таблица начальной загрузки Маниша Раджа Силвала
Bootstrap Table — Material Design и Bootstrap 4
Таблица данных выцветания и размытия при наведении
Этот интуитивно понятный дизайн отлично смотрится на любом типе веб-сайта.У него красивый заголовок, который позволяет вам навести курсор на опцию. Затем все остальное исчезает, поэтому нужный раздел выделяется и хорошо виден.
Bootstrap | Сворачивание стола
Адаптивный стол V2
Responsive Table V2 имеет бледную цветовую схему и более крупный четкий шрифт, что упрощает чтение данных.
Код хорошо написан, поэтому вы можете использовать его в качестве основы для добавления любых предпочтительных дополнительных настраиваемых функций к основным функциям.Основной дизайн и оптимизация выполнены очень хорошо.
Таблица цен
Таблицы цен
показывают причины и преимущества цен для пользователей, а дизайн должен быть хорошо организован, чтобы читатель мог понять данные о ценах и иметь четкое представление о ваших продуктах, подписках или планах. Таблица цен имеет красивую градиентную границу с цветами, которые делают ее привлекательной.
Добавить строки в таблицу с помощью jQuery
Используя jquery и Bootstrap 4, динамически добавляйте и удаляйте строки таблицы.
Завершение мыслей об этих таблицах Bootstrap
Когда вы выбираете таблицы начальной загрузки для своего веб-сайта, решите, что вы хотите улучшить для средства просмотра, например, таблицу цен, таблицу данных или текст. Подумайте, где вы разместите каждый раздел, чтобы он был как можно более читабельным. Добавьте кнопки, панели, флажки и многое другое, если они улучшат читаемость. Вы также можете выбрать таблицы начальной загрузки с более расширенными параметрами, включая функции поиска, разбивки на страницы или сортировки.
Лучшие таблицы — это те, которые вы настраиваете, потому что лучше всего знаете, что подойдет вашему веб-сайту и вашему видению. Включите свои идеи в дизайн, и это привлечет больше пользователей.
Если вам нужно более простое решение для создания таблиц и встраивания их на свой веб-сайт, вы можете использовать wpDataTables.
Пример таблицы, созданной с помощью wpDataTables
wpDataTables — это самый продаваемый плагин таблиц WordPress, который упрощает вашу работу с таблицами, диаграммами и управлением данными.Более 30 000 компаний и частных лиц уже доверяют wpDataTables для работы с финансовыми, научными, статистическими, коммерческими и другими данными.
Если вам понравилось читать эту статью о таблицах Bootstrap, вам следует ознакомиться с этой статьей о цвете фона таблиц.
Мы также писали о нескольких связанных темах, например, как центрировать таблицу с помощью CSS, таблицы HTML, адаптивные таблицы с помощью CSS, таблицы CSS и плагины таблиц jQuery.
42 Bootstrap Tables
Коллекция бесплатных Bootstrap table примеров кода: отзывчивый, с разбивкой на страницы, с поиском, с фильтром, прокручиваемый, сортируемый, полосатый .Обновление коллекции апреля 2020 года. 17 новинок.
- Таблицы CSS
О коде
Стол V19
Бесплатный шаблон таблицы продаж с аватарами, который без проблем работает на мобильных и настольных устройствах. Вы можете выбрать или отменить выбор строк или выбрать их по отдельности. Бесплатный фрагмент также имеет эффект наведения.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: font-awesome.css, jquery.js, popper.js
Версия начальной загрузки: 4.3.1
О коде
Стол V18
Удобный и универсальный бесплатный адаптивный шаблон темной таблицы, который подходит для самых разных проектов. Он также имеет функцию эффекта наведения для выделения строки и галочку с возможностью выбора / отмены выбора всех.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: font-awesome.css, jquery.js, popper.js
Версия начальной загрузки: 4.3.1
О коде
Стол V16
Если вам больше всего нравится черный цвет, то этот бесплатный шаблон темной таблицы поможет вам сэкономить время и силы, так как вы можете быстро встроить его. Макет на 100% адаптивен и имеет эффект наведения, который выделяет всю строку.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: font-awesome.css, jquery.js, popper.js
Версия начальной загрузки: 4.3.1
Автор
- BBBootstrap Команда
-
О коде
Таблица Bootstrap 5 с поиском и флажками
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: font-awesome.css
Версия начальной загрузки: 5.0,0
О коде
Стол V6
Этот аккуратный и бесплатный шаблон таблицы корзины покупок идеально подходит для всех веб-сайтов электронной коммерции, независимо от продуктов. Инструмент использует Bootstrap Framework в качестве основы, обещая полную отзывчивость.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: font-awesome.css, jquery.js, popper.js
Версия начальной загрузки: 4.3.1
О коде
Стол V5
Для вашего профессионального применения этот бесплатный шаблон таблицы профилей может оказаться чрезвычайно полезным.В нем есть флажки, возможность стереть профиль и другие полезные вещи, которые вам пригодятся.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: font-awesome.css, jquery.js, popper.js
Версия начальной загрузки: 4.3.1
О коде
Стол V4
Создайте удобное и практичное расписание с помощью этого простого в использовании и удобного бесплатного шаблона таблицы расписания занятий.Инструмент имеет очень чистый дизайн, чтобы не отвлекать внимание от всего необходимого контента. Он также включает в себя эффект наведения.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: font-awesome.css, jquery.js, popper.js
Версия начальной загрузки: 4.3.1
Автор
- BBBootstrap Команда
-
О коде
Таблица Bootstrap 5 внутри модального шаблона
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: font-awesome.css
Версия начальной загрузки: 5.0.0
Автор
- Дей Дей
-
О коде
Таблица цен с изображениями
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: font-awesome.css
Версия начальной загрузки: 4.5.0
О коде
Таблицы цен
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: —
Версия начальной загрузки: 4.4,1
Автор
- Сваруп Кумар Куйла
-
О коде
Дизайн таблицы цен
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: —
Версия начальной загрузки: 4.5.0
О коде
Таблица цен с подробным описанием
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: —
Версия начальной загрузки: 4.4,1
О коде
Bootstrap 4 — Таблица цен
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: —
Версия начальной загрузки: 4.1.1
О коде
Bootstrap Добавить строки в таблицу
Используя jQuery и Bootstrap 4, динамически добавляйте и удаляйте строки таблицы.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: bootstrap.css, font-awesome.css, jquery.js, bootstrap.js
Версия начальной загрузки: 4.3.1
Автор
- Маниш Радж Силвал
-
О коде
Таблица начальной загрузки
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: bootstrap.css
Версия начальной загрузки: 4.1.3
О коде
Стиль таблицы начальной загрузки 12
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: font-awesome.css
Версия начальной загрузки: 3.3.0
О коде
Стиль таблицы начальной загрузки 5
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: font-awesome.css
Версия начальной загрузки: 3.3.0
Автор
- BBBootstrap Команда
-
О коде
Статическая таблица Bootstrap 4
Статическая таблица Bootstrap 4 с флажками и фиксированным заголовком.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Адаптивный: нет
Зависимости: bootstrap.css, bootstrap.js, jquery.js
Версия начальной загрузки: 4.3.1
О коде
Таблицы данных начальной загрузки
Используя Bootstrap 4 и Datatables, добавьте элементы управления взаимодействием в свои HTML-таблицы.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: bootstrap.css, datatables.bootstrap4.css, bootstrap.js, jquery.js, datatableas.js, datatables.bootstrap.js
Версия начальной загрузки: 4.3.1
Автор
- Хитеш Чаухан
-
О коде
Таблица цен Business на Bootstrap 4
Bootstrap 4 Таблица цен для бизнеса с использованием HTML и CSS.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Адаптивный: нет
Зависимости: bootstrap.css
Версия начальной загрузки: 4.3.1
Автор
- Креативный Тим
-
О коде
Таблица начальной загрузки
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: bootstrap.css, jquery.js, bootstrap.js
Версия начальной загрузки: 4.1.3
О коде
Таблица начальной загрузки с фиксированным заголовком
Создайте таблицу начальной загрузки с фиксированным заголовком и прокручиваемым телом с помощью Bootstrap 4.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: bootstrap.css, font-awesome.css, jquery.js, bootstrap.js
Версия начальной загрузки: 4.3.1
О коде
Таблица цен на Bootstrap
Простое создание классной таблицы цен в Bootstrap 4.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: bootstrap.css, font-awesome.css, bootstrap.js, jquery.js
Версия начальной загрузки: 4.3.1
Автор
- BBBootstrap Команда
-
О коде
Bootstrap 4 Таблица командных очков
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Адаптивный: нет
Зависимости: bootstrap.css, bootstrap.js, font-awesome.css, jquery.js
Версия начальной загрузки: 4.0.0
Автор
- BBBootstrap Команда
-
О коде
Базовая таблица Bootstrap 4 с картой
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Адаптивный: нет
Зависимости: bootstrap.css
Версия начальной загрузки: 4.0.0
О коде
Стол с вертикальной и горизонтальной подсветкой
Пример таблицы на основе HTML5 и CSS3, которую можно использовать в качестве шаблона для вашего веб-сайта.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: font-awesome.css, animate.css, select2.css, perfect-scrollbar.css, jquery.js, popper.js, select2.js
Версия начальной загрузки: 4.0.0
О коде
Адаптивный стол V1
Пример таблицы на основе HTML5 и CSS3, которую можно использовать в качестве шаблона для вашего веб-сайта.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: font-awesome.css, animate.css, select2.css, perfect-scrollbar.css, jquery.js, popper.js, select2.js
Версия начальной загрузки: 4.0.0
Автор
- MDBootstrap
-
О коде
Bootstrap Table — Material Design и Bootstrap 4
Таблицы начальной загрузки представляют данные в виде системы столбцов и строк. Используется для различных целей, например для таймера и календарей.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: bootstrap.css, mdbootstrap.css, font-awesome.css, jquery.js, bootstrap.js, mdbootstrap.js, popper.js
Версия начальной загрузки: 4.0.0
Автор
- тиффани чунг
-
О коде
Свернуть таблицу начальной загрузки
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: bootstrap.css, bootstrap.js, handlebars.js, jquery.js
Версия начальной загрузки: 4.0.0
Автор
- Джейсон МакКуэн
-
О коде
Стол со складными секциями
Таблица начальной загрузки с двумя заголовками и тремя сворачиваемыми секциями.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: bootstrap.css, bootstrap.js, jquery.js
Версия начальной загрузки: 4.0.0
Автор
- Явуз Селим Курназ
-
О коде
Таблица начальной загрузки
Bootstrap table thead fix tbody scroll.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: bootstrap.css
Версия начальной загрузки: 3.3.5
Автор
- adobewordpress
-
О коде
Поиск в таблице начальной загрузки
Поиск входных данных для сетки Bootstrap с помощью jQuery.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: bootstrap.css, jquery.js
Версия начальной загрузки: 3.3,2
Автор
- Райан Гилл
-
О коде
Адаптивная панель мониторинга Bootstrap с таблицей
Просто демонстрация макета с использованием начальной загрузки вместе с таблицей начальной загрузки.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: bootstrap.css, bootstrap-table.css, font-awesome.css, jquery.js, bootstrap.js, bootstrap-table.js
Версия начальной загрузки: 3.2.0
О коде
Таблица цен на Creative
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: bootstrap.css, bootstrap.js, jquery.js
Версия начальной загрузки: 4.1.1
О коде
Bootstrap Simple & Clean Таблица цен
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: bootstrap.css, bootstrap.js, jquery.js
Версия начальной загрузки: 4.1.1
О коде
Bootstrap 4 Таблица
Bootstrap 4 адаптивных таблицы с флажками «Материал» и разбивкой на страницы.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: bootstrap.css, bootstrap.js, jquery.js
Версия начальной загрузки: 4.0.0
О коде
Таблица начальной загрузки
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: bootstrap.css, bootstrap.js, jquery.js, bootstrap-material-design.css, font-awesome.css
Версия начальной загрузки: 4.0.0
О коде
Таблица лучших цен
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: bootstrap.css, bootstrap.js, jquery.js, font-awesome.css
Версия начальной загрузки: 4.0.0
О коде
Таблица адаптивных цен
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: bootstrap.css, bootstrap.js, jquery.js
Версия начальной загрузки: 3.3.0
О коде
Стол с индикатором выполнения
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: bootstrap.css, bootstrap.js, jquery.js
Версия начальной загрузки: 3.3.0
О коде
Фильтр Easy Table
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: bootstrap.css, bootstrap.js, jquery.js
Версия начальной загрузки: 3.3.0
О коде
Простые таблицы цен
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: bootstrap.css, bootstrap.js, jquery.js
Версия начальной загрузки: 3.1.0
.