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.