Table

Tables allow you to aggregate a huge amount of data and present it in a clear and orderly way. MDB tables provide additional benefits like responsiveness and the possibility of manipulating the table styles.

Due to the widespread use of <table> elements across third-party widgets like calendars and date pickers, Bootstrap’s tables are opt-in. Add the base class .cd-table to any <table>, then extend with our optional modifier classes or custom styles. All table styles are not inherited in Bootstrap, meaning any nested tables can be styled independent from the parent.

Basic example

Using the most basic table markup, here’s how .cd-table-based tables look in DesignLanguage.

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

Striped Table

Use .cd-table-striped to add zebra-striping to any table row within the <tbody>.

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

Hoverable Table

Add .cd-table-hover to enable a hover state on table rows within a <tbody>.

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

Active tables

Highlight a table row or cell by adding a .cd-table-active class.

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

Table with colored header

Highlight a table header or cell by adding a .cd-table-head class.

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

Bordered Table

Add .cd-table-bordered for borders on all sides of the table and cells.

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

Borderless Table

Add .cd-table-borderless for a table without borders.

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

Small Table

Add .cd-table-sm to make any .cd-table more compact by cutting all cell padding in half.

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

Nesting Table

Border styles, active styles, and table variants are not inherited by nested tables.

First

Last

Handle

Mark

Otto

@mdo

Header	Header	Header
A	First	Last
B	First	Last
C	First	Last

Larry

the Bird

@twitter

How nesting works

To prevent any styles from leaking to nested tables, we use the child combinator (>) selector in our CSS. Since we need to target all the tds and ths in the thead, tbody, and tfoot, our selector would look pretty long without it. As such, we use the rather odd looking .cd-table > :not(caption) > * > * selector to target all tds and ths of the .cd-table, but none of any potential nested tables.

Note that if you add <tr>s as direct children of a table, those <tr> will be wrapped in a <tbody> by default, thus making our selectors work as intended.

Additional examples

A few practical examples of the use of tables with typical components such as buttons, checkboxes or icons.

Buttons

To learn more about buttons read Buttons Docs.

#	Lorem	Ipsum
1	Sit	Amet
2	Adipisicing	Elit
3	Hic	Fugiat

Checkboxes

To learn more about checkboxes read Checkbox Docs.

Lorem	Ipsum	Dolor
Sit	Amet	Consectetur
Adipisicing	Elit	Sint
Hic	Fugiat	Temporibus

Icons

	Product Detail Views	Unique Purchases	Quantity	Product Revenue	Avg. Price
Value	18,492	228	350	$4,787.64	$13.68
Percentage change	-48.8%%	14.0%	46.4%	29.6%	-11.5%
Absolute change	-17,654	28	111	$1,092.72	$-1.78

Responsive tables

Responsive tables allow tables to be scrolled horizontally with ease. Make any table responsive across all viewports by wrapping a .cd-table with .table-responsive. Or, pick a maximum breakpoint with which to have a responsive table up to by using .table-responsive{-sm|-md|-lg|-xl|-xxl}.

Always responsive

Across every breakpoint, use .table-responsive for horizontally scrolling tables.

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

Breakpoint specific

Use .table-responsive{-sm|-md|-lg|-xl|-xxl} as needed to create responsive tables up to a particular breakpoint. From that breakpoint and up, the table will behave normally and not scroll horizontally.