Bootstrap 4 додав кілька нових класів таблиць, які допомагають створювати однаково оформлені та адаптивні таблиці.
Базова таблиця
Для базової таблиці, з невеликим padding біля осередків та горизонтальними роздільниками, застосуйте клас .table до елемента <table>.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <table class="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 class="table table-dark"> <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 class="table table-striped"> <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 class="table table-bordered"> <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 class="table table-hover"> <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 class="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 class="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 class="table table-sm"> <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 class="table"> <thead> <tr> <th>Заголовок 1</th> <th>Заголовок 2</th> <th>Заголовок 3</th> </tr> </thead> <tbody> <tr> <td class="table-active">Активний</td> <td class="table-success">Успіх</td> <td> </td> </tr> <tr> <td> </td> <td class="table-info">Інформація</td> <td> </td> </tr> <tr> <td class="table-danger">Небезпека</td> <td> </td> <td class="table-warning">Попередження</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 class="table-responsive"> <table class="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.