Tables

Get DataTables examples

Basic Table

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

Name Phone Number Date of Birth Actions
Vanessa Tucker 864-348-0485 June 21, 1961
William Harris 914-939-2458 May 15, 1948
Sharon Lessman 704-993-5435 September 14, 1965
Christina Mason 765-382-8195 April 2, 1971
Robin Schneiders 202-672-1407 October 12, 1966

Striped Rows

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

Name Phone Number Date of Birth Actions
Vanessa Tucker 864-348-0485 June 21, 1961
William Harris 914-939-2458 May 15, 1948
Sharon Lessman 704-993-5435 September 14, 1965
Christina Mason 765-382-8195 April 2, 1971
Robin Schneiders 202-672-1407 October 12, 1966

Condensed Table

Add .table-sm to make tables more compact by cutting cell padding in half.

Operating system Users Share
Windows 8,232 38.0%
macOS 4,108 19.0%
Android 3,950 18.3%
iOS 3,317 15.3%
Linux 1,184 5.5%
ChromeOS 642 3.0%
Other 205 0.9%

Hoverable Rows

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

Name Phone Number Date of Birth
Vanessa Tucker 864-348-0485 June 21, 1961
William Harris 914-939-2458 May 15, 1948
Sharon Lessman 704-993-5435 September 14, 1965
Christina Mason 765-382-8195 April 2, 1971

Bordered Table

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

Name Phone Number Date of Birth Actions
Vanessa Tucker 864-348-0485 June 21, 1961
William Harris 914-939-2458 May 15, 1948
Sharon Lessman 704-993-5435 September 14, 1965
Christina Mason 765-382-8195 April 2, 1971
Robin Schneiders 202-672-1407 October 12, 1966

Contextual Classes

Use contextual classes to color table rows or individual cells.

Name Phone Number Date of Birth Actions
Vanessa Tucker 864-348-0485 June 21, 1961
William Harris 914-939-2458 May 15, 1948
Sharon Lessman 704-993-5435 September 14, 1965
Christina Mason 765-382-8195 April 2, 1971
Robin Schneiders 202-672-1407 October 12, 1966

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