Tables
Basic 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.
| Operation System | Users | Share |
|---|---|---|
| Windows | 8.232 | 40% |
| Mac OS | 3.322 | 20% |
| Linux | 4.232 | 34% |
| FreeBSD | 1.121 | 12% |
| Chrome OS | 1.331 | 15% |
| Android | 2.301 | 20% |
| iOS | 1.162 | 14% |
| Windows Phone | 562 | 7% |
| Other | 1.181 | 14% |
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 |