Tables

Basic example

• table.table (Add .table-dark to invert colors)
  • Head thead
    • Header column tr
      • Header cell th Attribute
        • Attribute scope="col" (to column header cells)
  • Body tbody
    • Column tr
      • Header cells (typically leftmost) th Attribute
        • Attribute scope="row" (to row header cells)
      • Normal cells td

table.table

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

table.table.table-dark

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

Table head options

Set .thead-(dark|light) to thead (or also .table-(dark|light) )

.thead-dark

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

.thead-light

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

Striped rows

Set .table-striped to table

table.table.table-striped

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

table.table.table-striped.table-dark

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

Bordered table

Set .table-bordered to table

table.table.table-bordered

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

table.table.table-bordered.table-dark

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

Borderless table

Set .table-borderless to table

table.table.table-borderless

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

table.table.table-borderless.table-dark

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

Hoverable rows

Set .table-hover to table

table.table.table-hover

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

table.table.table-hover.table-dark

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

Small table

Set .table-sm to table for cutting cell paddings to half

table.table.table-sm

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

table.table.table-sm.table-dark

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

Contextual classes

.table-(primary|secondary|success|danger|warning|info|light|dark|active)

Available for all levels ( table , thead , tbody , tr , th , td )

See differences from basic contextual colors as follows.

• No -muted , -white (.table-muted and .table-muted do not exist)
• Has -active (.table-active )

Example for tr

Class	Heading	Heading
(default)	Cell	Cell
.table-primary	Cell	Cell
.table-secondary	Cell	Cell
.table-success	Cell	Cell
.table-danger	Cell	Cell
.table-warning	Cell	Cell
.table-info	Cell	Cell
.table-light	Cell	Cell
.table-dark	Cell	Cell
.table-active	Cell	Cell

.table-{context} applys to both text and background (in above example, remark .table-dark reverses the text color of cells). Also it sets a background color lighter than .bg-{context}. Setting a background color directly is available. But you may also have to set a text color.

Example: Used .bg-{context} for background, .text-(dark|white) for text

Class	Heading	Heading
.bg-primary.text-white	Cell	Cell
.bg-secondary.text-white	Cell	Cell
.bg-success.text-white	Cell	Cell
.bg-danger.text-white	Cell	Cell
.bg-warning.text-white	Cell	Cell
.bg-info.text-white	Cell	Cell
.bg-light.text-dark	Cell	Cell
.bg-dark.text-white	Cell	Cell
.bg-white.text-dark	Cell	Cell

Captions

Use caption

• table.table
  • caption
    • Alignment (optional) .text-(left|center|right) (⇒ Text utilities )
  • thead (same as former examples)
  • tbody (same)

Example: Caption List of users is aligned center with .text-center

List of users

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

Responsive tables

Add .table-responsive to table.table ( table.table.table-responsive )

⇒ Shows a horizontal scroll bar on table width greater than viewport width

#	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading
1	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
2	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
3	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell

Use .table-responsive-(sm|md|lg|xl) for responsive tables with specific breakpoints

table.table.table-responsive-sm

#	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading
1	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell

table.table.table-responsive-md

#	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading
1	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell

table.table.table-responsive-lg

#	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading
1	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell

table.table.table-responsive-xl

#	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading
1	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell