Tables
Get DataTables examplesBasic Table
Using the most basic table markup, here’s how .table-based tables look in Bootstrap.
Striped Rows
Use .table-striped to add zebra-striping to any table row within the <tbody>.
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.
Contextual Classes
Use contextual classes to color table rows or individual cells.
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 |