Руководство Bootstrap Table
View more Tutorials:
Следуйте за нами на нашей фан-странице, чтобы получать уведомления каждый раз, когда появляются новые статьи.
Facebook
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>
