Bootstrap Table

Оформление таблиц в Bootstrap 

Классы для оформления таблиц.

.table класс добавляет базовый стиль к таблице:

1.<table class="table">
2 ...
3. </
table>

Чтобы не вводить объемный код, он будет сокращен, и оставлены только нужные моменты.

<table class="table">
<thead>
<tr>
<th>first name</th>
<th>last name</th>
<th>twitter</th>
</tr>
</thead>
<tbody>
<tr>
<td>john</td>
<td>smtih</td>
<td>@jsmtih</td>
</tr>
<tr>
<td>steve</td>

<td>stevens</td>
<td>@stevens</td>
</tr>
<tr>
<td>mike</td>
<td>michaels</td>
<td>@mandm</td>
</tr>
</tbody>
</table>

 

first namelast nametwitter
john smtih @jsmtih
steve stevens @stevens
mike michaels @mandm

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

first namelast nametwitter
john smtih @jsmtih
steve stevens @stevens
mike michaels @mandm

Чтобы просто внести таблицу с границами со всех сторон просто добавьте класс table table-bordered

first namelast nametwitter
john smtih @jsmtih
steve stevens @stevens
mike michaels @mandm

Чтобы получить эффект выделения при наведении добавьте класс table-hover

first namelast nametwitter
john smtih @jsmtih
steve stevens @stevens
mike michaels @mandm

Чтобы получить таблицу без границ добавьте класс: table table-borderless

first namelast nametwitter
john smtih @jsmtih
steve stevens @stevens
mike michaels @mandm

И чтобы получить вот такую радужную таблицу добавляются несколько классов: tr class="table-primary",tr class="table-success, tr class="table-danger",tr class="table-info", tr class="table-warning",tr class="table-active", tr class="table-secondary", tr class="table-light", tr class="table-dark text-dark". Эти классы могут быть использованы для таблицы, столбцов, так и для строк по отдельности

FirstnameLastnameEmail
Default Defaultson Этот адрес электронной почты защищён от спам-ботов. У вас должен быть включен JavaScript для просмотра.
Primary Joe Этот адрес электронной почты защищён от спам-ботов. У вас должен быть включен JavaScript для просмотра.
Success Doe Этот адрес электронной почты защищён от спам-ботов. У вас должен быть включен JavaScript для просмотра.
Danger Moe Этот адрес электронной почты защищён от спам-ботов. У вас должен быть включен JavaScript для просмотра.
Info Dooley Этот адрес электронной почты защищён от спам-ботов. У вас должен быть включен JavaScript для просмотра.
Warning Refs Этот адрес электронной почты защищён от спам-ботов. У вас должен быть включен JavaScript для просмотра.
Active Activeson Этот адрес электронной почты защищён от спам-ботов. У вас должен быть включен JavaScript для просмотра.
Secondary Secondson Этот адрес электронной почты защищён от спам-ботов. У вас должен быть включен JavaScript для просмотра.
Light Angie Этот адрес электронной почты защищён от спам-ботов. У вас должен быть включен JavaScript для просмотра.
Dark Bo Этот адрес электронной почты защищён от спам-ботов. У вас должен быть включен JavaScript для просмотра.

Для того, чтобы выделить заголовок можно применить класс к тегу thead. Вот так:table class="table" thead class="thead-dark" и получим:

first namelast nametwitter
john smtih @jsmtih
steve stevens @stevens
mike michaels @mandm

Сделать таблицу меньше можно применив класс: table-sm Вот так:

first namelast nametwitter
john smtih @jsmtih
steve stevens @stevens
mike michaels @mandm

Если таблица будет слишком широкая и не вместится на экран, но изменив количество столбцов изменится и смысл таблицы, тогда стоит применить следующую конструкцию. Всю таблицу сначала следует взять в тег div с присвоением класса и ему, а внутри него поместить таблицу с классом. Вот так: div class="table-responsive" table class="table table-bordered" не забываем в конце также закрывать наш div.

#FirstnameLastnameAgeCityCountrySexExampleExampleExampleExampleExampleExampleExampleExampleExampleExampleExampleExample
1 Anna Pitt 35 New York USA Female Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes

Вы также можете решить, когда к вашей таблице применить классы для добавления функции прокрутки, в зависимости от ширины экран

  • .table-responsive-sm < 576px
    .table-responsive-md < 768px
    .table-responsive-lg < 992px
    .table-responsive-xl < 1200px

Печать