Bootstrap 5 Таблицы

Основная таблица

Базовая таблица Bootstrap 5 имеет небольшой отступ внутри и горизонтальные разделители.

.table Добавьте базовый стиль к таблице с помощью класса:

Пример

Попробуйте сами

Строки с полосами

.table-striped Добавьте полосатый узор в таблицу с помощью класса:

Пример

Попробуйте сами

Таблица с рамкой

.table-bordered Добавьте рамку ко всем сторонам таблицы и ячеек:

Пример

Попробуйте сами

Строки с эффектом наведения

.table-hover Добавьте эффект наведения (серый фоновый цвет) к строкам таблицы:

Пример

Попробуйте сами

Черная/темная таблица

.table-dark Добавьте черный фон к таблице с помощью класса:

Пример

Попробуйте сами

таблицу с темными полосами

сочетайте .table-dark и .table-striped Создайте таблицу с темными полосами:

Пример

Попробуйте сами

Таблица с темным фоном, которую можно навести

.table-hover Добавьте эффект наведения (серый фоновый цвет) к строкам таблицы:

Пример

Попробуйте сами

Таблица без рамки

.table-borderless Удалите рамку с таблицы:

Пример

Попробуйте сами

上下文类

上下文类可用于为整个表格 (Контекстные классыКонтекстные классы можно использовать для всего таблицы (<table>) или строка таблицы (<tr>) или ячейка таблицы (

Пример

Попробуйте сами

<td>

Класс ) Шading.
Доступные контекстные классы: Описание
.table-primary Синий: указывает на важные действия.
.table-success Зеленый: указывает на успех или положительное действие.
.table-danger Красный: указывает на опасность или потенциально негативное поведение.
.table-info Светло-голубой: указывает на нейтральные изменения информации или действия.
.table-active Оранжевый: указывает на警告, которые могут потребовать внимания.
.table-secondary Серый: применяется цвет при наведении на строку или ячейку таблицы.
.table-light Светло-серый: указывает на фоновый цвет строк или ячеек таблицы.
.table-dark Серый: указывает на не очень важные действия.

Цвет заголовка таблицы

Вы также можете использовать любые контекстные классы, чтобы добавить фоновый цвет только заголовкам таблицы:

Пример

Попробуйте сами

Маленькие таблицы

.table-sm Класс уменьшает таблицу, уменьшая наполнение ячеек вдвое:

Пример

Попробуйте сами

Responsive таблицы

.table-responsive Класс добавляет ползунок таблице по мере необходимости (если она слишком большая в горизонтальном направлении):

Пример

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Попробуйте сами

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

Класс Ширина экрана
.table-responsive-sm < 576px
.table-responsive-md < 768px
.table-responsive-lg < 992px
.table-responsive-xl < 1200px
.table-responsive-xxl < 1400px

Пример

<div class="table-responsive-sm">
  <table class="table">
    ...
  </table>
</div>

Попробуйте сами