Руководство Bootstrap Table
View more Tutorials:
Table (Таблица) это один из компонентов, который широко используется в странице. Чтобы получить таблицу в стиле Bootstrap очень просто, вам просто нужно применить класс .table для тегов (tag) <table>, и некотовые дополнительные классы для создания таблицы по желанию.
Примените класс .table для <table> вы получите саму базовую таблицу в стиле Bootstrap. Изображение ниже покажет вам разницу между таблицей по умолчанию и таблицей применяющей класс .table:

Класс .table настраивает ширину 100% и прозрачный фоновый цвет (transparent) для таблице, настривает padding для ячеек (cell), ...
basic-table-example.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Basic Bootstrap Table</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"> </head> <body> <div class="container"> <h2>Basic Bootstrap Table</h2> <table class="table"> <thead> <tr> <th>No</th> <th>Language</th> <th>Percent</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Java</td> <td>14.21%</td> </tr> <tr> <td>2</td> <td>C</td> <td>11.03%</td> </tr> <tr> <td>3</td> <td>C++</td> <td>5.60%</td> </tr> </tbody> </table> </div> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> </body> </html>
Класс .table применяет прозрачный фоновый цвет (transparent) для таблицы, но если вы хотите другой цвет фона, то можете использовать следующие некоторые готовые классы:
- .table-primary
- .table-secondary
- .table-success
- .table-danger
- .table-warning
- .table-info
- .table-light
- .table-dark
- .table-muted
- .table-white

Вы можете настроить цвет для Header таблицы используя класс .thead-dark или .thead-light для тега <thead>:

.thead-dark .thead-light
<table class="table"> <thead class="thead-dark"> <tr> <th>No</th> <th>Language</th> <th>Percent</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Java</td> <td>14.21%</td> </tr> <tr> <td>2</td> <td>C</td> <td>11.03%</td> </tr> <tr> <td>3</td> <td>C++</td> <td>5.60%</td> </tr> </tbody> </table>
Помимо этого, чтобы настроить цвет для Header таблицы, вы так же можете использовать классы ниже:
- .table-primary
- .table-secondary
- .table-success
- .table-danger
- .table-warning
- .table-info
- .table-light
- .table-dark
- .table-muted
- .table-white
Пример ниже показывает вам как настроить цвет для ячеек таблицы:

- .table-primary
- .table-secondary
- .table-success
- .table-danger
- .table-warning
- .table-info
- .table-light
- .table-dark
- .table-muted
- .table-white
Background color on Cells
<table class="table"> <thead> <tr> <th>No</th> <th>Language</th> <th class="table-primary">Percent</th> </tr> </thead> <tbody> <tr> <td>1</td> <td class="table-success">Java</td> <td>14.21%</td> </tr> <tr> <td>2</td> <td>C</td> <td>11.03%</td> </tr> <tr> <td>3</td> <td>C++</td> <td class="table-warning">5.60%</td> </tr> </tbody> </table>
Используя класс .table-striped вы можете создать таблицы с полосками (Striped table), это означает четные и нечетные строки в <tbody> будут иметь разные фоновые цвета, помогает пользователю легче разглядеть.

.table .table-striped
<table class="table table-striped"> <thead> <tr> <th>No</th> <th>Language</th> <th>Percent</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Java</td> <td>14.21%</td> </tr> <tr> <td>2</td> <td>C</td> <td>11.03%</td> </tr> <tr> <td>3</td> <td>C++</td> <td>5.60%</td> </tr> </tbody> </table>

.table .table-striped .table-dark
<table class="table table-striped table-dark"> <thead> <tr> <th>No</th> <th>Language</th> <th>Percent</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Java</td> <td>14.21%</td> </tr> <tr> <td>2</td> <td>C</td> <td>11.03%</td> </tr> <tr> <td>3</td> <td>C++</td> <td>5.60%</td> </tr> </tbody> </table>
Класс .table-bordered создает границы (border) для 4 сторон таблицы, и все границы ячеек таблицы.

.table .table-bordered
<table class="table table-bordered"> <thead> <tr> <th>No</th> <th>Language</th> <th>Percent</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Java</td> <td>14.21%</td> </tr> <tr> <td>2</td> <td>C</td> <td>11.03%</td> </tr> <tr> <td>3</td> <td>C++</td> <td>5.60%</td> </tr> </tbody> </table>
.table .table-bordered .table-striped

.table .table-bordered .table-striped
<table class="table table-bordered table-striped"> <thead> <tr> <th>No</th> <th>Language</th> <th>Percent</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Java</td> <td>14.21%</td> </tr> <tr> <td>2</td> <td>C</td> <td>11.03%</td> </tr> <tr> <td>3</td> <td>C++</td> <td>5.60%</td> </tr> </tbody> </table>
Класс .table-borderless помогает вам создать таблицу баз границ (border), стороны таблицы не будут иметь границ, так же как и все ячейки (cell).

.table .table-borderless
<table class="table table-borderless"> <thead> <tr> <th>No</th> <th>Language</th> <th>Percent</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Java</td> <td>14.21%</td> </tr> <tr> <td>2</td> <td>C</td> <td>11.03%</td> </tr> <tr> <td>3</td> <td>C++</td> <td>5.60%</td> </tr> </tbody> </table>
Используйте .table-borderless + .table-dark чтобы создать таблицу баз грагиц, с темным фоновым цветомi.

.table .table-borderless .table-dark
<table class="table table-borderless table-dark"> <thead> <tr> <th>No</th> <th>Language</th> <th>Percent</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Java</td> <td>14.21%</td> </tr> <tr> <td>2</td> <td>C</td> <td>11.03%</td> </tr> <tr> <td>3</td> <td>C++</td> <td>5.60%</td> </tr> </tbody> </table>
Класс .table-hover помогает вам создать эффект (effect) менять фоновый цвет когда курсор (pointer) передвигается на строках (row) таблицы (Только строки в <tbody>). Данный эффект похож на изображение ниже:

.table .table-hover
<table class="table table-hover"> <thead> <tr> <th>No</th> <th>Language</th> <th>Percent</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Java</td> <td>14.21%</td> </tr> <tr> <td>2</td> <td>C</td> <td>11.03%</td> </tr> <tr> <td>3</td> <td>C++</td> <td>5.60%</td> </tr> </tbody> </table>
Bootstrap настраивает padding для ячеек таблицы, данное значение по-умолчанию является 0.75rem, если вам нужна таблица поменьше, используйте класс .table-sm, данный класс уменьшает значение padding наполовину. Ниже является изображение таблицы, не использующей класс .table-sm и таблицы, использующей .table-sm.

.table-sm
<table class="table table-bordered table-sm"> <thead> <tr> <th>No</th> <th>Language</th> <th>Percent</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Java</td> <td>14.21%</td> </tr> <tr> <td>2</td> <td>C</td> <td>11.03%</td> </tr> <tr> <td>3</td> <td>C++</td> <td>5.60%</td> </tr> </tbody> </table>
Очень сложно создать таблица подходящую устройствам с разными ширинами экрана. При меньшей ширине устройства, таблица старается уменьшить свою ширину. На самом деле столбцы не могут уменьшить свою ширину к 0. И когда таблица не может больше уменьшиться в ширине, появится горизонтальная прокрутка (scroll bar) на браузере.

Решение у Bootstrap это использовать тег <div class="table-responsive[-sm|-md|-lg|-xl]"> обернуть (wrap) таблицу, появится горизонтальная прокрутка (scroll bar) на теге <div>, если таблица не может еще больше уменьшиться в ширине. Таким образом горизонтальная прокрутка появится на теге <div> вместо того, чтобы появиться на браузере.

Css Класс | Описание |
.table-responsive | Если таблица не может более уменьшиться в ширине, появится горизонтальная прокрутка. |
.table-responsive-sm | Если ширина устройства (или браузера) меньше 567px и таблица не может более уменьшиться в ширине, появится горизонтальная прокрутка. |
.table-responsive-md | Если ширина устройства (или браузера) меньше 768px и таблица не может более уменьшиться в ширине, появится горизонтальная прокрутка. |
.table-responsive-lg | Если ширина устройства (или браузера) меньше 992px и таблица не может более уменьшиться в ширине, появится горизонтальная прокрутка. |
.table-responsive-xl | Если ширина устройства (или браузера) меньше 1200px и таблица не может более уменьшиться в ширине, появится горизонтальная прокрутка. |
responsive-table-example.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap Table</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"> </head> <body> <div class="container-fluid"> <h4>Responsive Table:</h4> <div class="table-responsive-sm"> <table class="table table-bordered"> <thead> <tr> <th>No</th> <th>Language</th> <th>Language Description</th> <th>First Release</th> <th>Author</th> <th>Percent</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Java</td> <td>Java is a programming language and computing platform... </td> <td>1995</td> <td>James Gosling</td> <td>14.21%</td> </tr> </tbody> </table> </div> <h3>Other Language</h3> <ul> <li>Go Language</li> </ul> </div> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> </body> </html>
Для Google, я нашел некоторые решения для настройки ширины столбцов в таблице в Bootstrap. Но после проверки я думаю есть решения хорошо работающие с Firefox но не работает с Chrome. Ниже я привел некоторые примеры и решения, которые считаю лучшими:
Example 1:
Таблица имеет 3 столбца. Первый столбец имеет ширину 10%, второй имеет ширину 70%, третий имеет ширину 20%.
- Решение: Используйте style ="width: X%".

style="width: X%"
<table class="table table-bordered"> <thead> <tr> <th style="width: 10%">No</th> <th style="width: 70%">Language</th> <th style="width: 20%">Percent</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Java</td> <td>14.21%</td> </tr> <tr> <td>2</td> <td>C</td> <td>11.03%</td> </tr> <tr> <td>3</td> <td>C++</td> <td>5.60%</td> </tr> </tbody> </table>
Example 2:
У вас есть таблица с 3-мя столбцами, и вы хотите:
Для устройств с шириной >= 567px | 3 столбца будут иметь соотношение ширины: 1:9:2 |
Для устройств с шириной < 567px | 3 столбца будут иметь соотношение ширины: 3:3:6 |


.d-flex + .col[-sm|-md|-lg|-xl]-*
<table class="table table-bordered"> <thead> <tr class="d-flex"> <th class="col-3 col-sm-1">No</th> <th class="col-3 col-sm-9">Language</th> <th class="col-6 col-sm-2">Percent</th> </tr> </thead> <tbody> <tr class="d-flex"> <td class="col-3 col-sm-1">1</td> <td class="col-3 col-sm-9">Java</td> <td class="col-6 col-sm-2">14.21%</td> </tr> <tr class="d-flex"> <td class="col-3 col-sm-1">2</td> <td class="col-3 col-sm-9">C</td> <td class="col-6 col-sm-2">11.03%</td> </tr> </tbody> </table>