Базовая таблица

The .table class adds basic styling (light padding and horizontal dividers) to a table:

Firstname Lastname Email
John Doe john@example.com
Mary Moe mary@example.com
July Dooley july@example.com

Полосатые ряды

The .table-striped class adds zebra-stripes to a table:

Firstname Lastname Email
John Doe john@example.com
Mary Moe mary@example.com
July Dooley july@example.com

Таблица с границами

The .table-bordered class adds borders on all sides of the table and the cells:

Firstname Lastname Email
John Doe john@example.com
Mary Moe mary@example.com
July Dooley july@example.com

Парящие строки

The .table-hover class enables a hover state (grey background on mouse over) on table rows:

Firstname Lastname Email
John Doe john@example.com
Mary Moe mary@example.com
July Dooley july@example.com

Черный фон

The .table-dark class adds a black background to the table:

Firstname Lastname Email
John Doe john@example.com
Mary Moe mary@example.com
July Dooley july@example.com

Темные полосы

Combine .table-dark and .table-striped to create a dark, striped table:

Firstname Lastname Email
John Doe john@example.com
Mary Moe mary@example.com
July Dooley july@example.com

Hoverable Dark Table

The .table-hover class adds a hover effect (grey background color) on table rows:

Firstname Lastname Email
John Doe john@example.com
Mary Moe mary@example.com
July Dooley july@example.com

Без границ

The .table-borderless class removes borders from the table:

Firstname Lastname Email
John Doe john@example.com
Mary Moe mary@example.com
July Dooley july@example.com

Контекстные классы

Contextual classes can be used to color the table, table rows or table cells. The classes that can be used are: .table-primary, .table-success, .table-info, .table-warning, .table-danger, .table-active, .table-secondary, .table-light and .table-dark:

Firstname Lastname Email
Default Defaultson def@somemail.com
Primary Joe joe@example.com
Success Doe john@example.com
Danger Moe mary@example.com
Info Dooley july@example.com
Warning Refs bo@example.com
Active Activeson act@example.com
Secondary Secondson sec@example.com
Light Angie angie@example.com
Dark Bo bo@example.com

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

The .thead-dark class adds a black background to table headers, and the .thead-light class adds a grey background to table headers:

Firstname Lastname Email
John Doe john@example.com
Mary Moe mary@example.com
July Dooley july@example.com
Firstname Lastname Email
John Doe john@example.com
Mary Moe mary@example.com
July Dooley july@example.com

Узкие строки

The .table-sm class makes the table smaller by cutting cell padding in half:

Firstname Lastname Email
John Doe john@example.com
Mary Moe mary@example.com
July Dooley july@example.com

Отзывчивая таблица

The .table-responsive class creates a responsive table which will scroll horizontally on screens that are less than 992px wide (if needed). When viewing on anything larger than 992px, there is no difference:

# Firstname Lastname Age City Country Sex Example Example Example Example Example Example Example Example Example Example Example Example
1 Anna Pitt 35 New York USA Female Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes

Responsive Table

The .table-responsive-sm class creates a responsive table which will scroll horizontally on screens that are less than 576px wide.

Resize the browser window to see the effect.

# Firstname Lastname Age City Country Sex Example Example Example Example
1 Anna Pitt 35 New York USA Female Yes Yes Yes Yes