Regular Tables - Bootstrap table styling examples
Default Table
Basic table structure
Basic table with default styling using Bootstrap table class.
| Browser | Platform(s) | Engine | Grade |
|---|---|---|---|
| Internet Explorer 5.0 | Win 95+ | 5 | C |
| Firefox 1.0 | Win 98+ / OSX.2+ | 1.7 | A |
| Camino 1.0 | OSX.2+ | 1.8 | A |
| Netscape 7.2 | Mac OS 8.6-9.2 | 1.7 | A |
Table Dark
Dark themed table
Invert the colors with .table-dark class for dark background.
| Browser | Platform(s) | Engine | Grade |
|---|---|---|---|
| Internet Explorer 5.0 | Win 95+ | 5 | C |
| Firefox 1.0 | Win 98+ / OSX.2+ | 1.7 | A |
| Camino 1.0 | OSX.2+ | 1.8 | A |
| Netscape 7.2 | Mac OS 8.6-9.2 | 1.7 | A |
Table Striped
Alternating row colors
Use .table-striped to add zebra-striping to table rows.
| Browser | Platform(s) | Engine | Grade |
|---|---|---|---|
| Internet Explorer 5.0 | Win 95+ | 5 | C |
| Firefox 1.0 | Win 98+ / OSX.2+ | 1.7 | A |
| Camino 1.0 | OSX.2+ | 1.8 | A |
| Netscape 7.2 | Mac OS 8.6-9.2 | 1.7 | A |
Table Hover
Hover effect on rows
Add .table-hover for a hover state on table rows.
| Browser | Platform(s) | Engine | Grade |
|---|---|---|---|
| Internet Explorer 5.0 | Win 95+ | 5 | C |
| Firefox 1.0 | Win 98+ / OSX.2+ | 1.7 | A |
| Camino 1.0 | OSX.2+ | 1.8 | A |
| Netscape 7.2 | Mac OS 8.6-9.2 | 1.7 | A |
Table Bordered
Borders on all sides
Add .table-bordered for borders on all sides of the table and cells.
| Browser | Platform(s) | Engine | Grade |
|---|---|---|---|
| Internet Explorer 5.0 | Win 95+ | 5 | C |
| Firefox 1.0 | Win 98+ / OSX.2+ | 1.7 | A |
| Camino 1.0 | OSX.2+ | 1.8 | A |
| Netscape 7.2 | Mac OS 8.6-9.2 | 1.7 | A |
Table Small
Compact table
Add .table-sm to make tables more compact by cutting cell padding in half.
| Browser | Platform(s) | Engine | Grade |
|---|---|---|---|
| Internet Explorer 5.0 | Win 95+ | 5 | C |
| Firefox 1.0 | Win 98+ / OSX.2+ | 1.7 | A |
| Camino 1.0 | OSX.2+ | 1.8 | A |
| Netscape 7.2 | Mac OS 8.6-9.2 | 1.7 | A |
Contextual Classes
Row and cell colors
Use contextual classes to color table rows or individual cells.
| Class | Browser | Platform(s) | Grade |
|---|---|---|---|
| table-primary | Chrome 80.0 | All Platforms | A |
| table-secondary | Firefox 72.0 | All Platforms | A |
| table-success | Safari 13.0 | Mac/iOS | A |
| table-danger | IE 11.0 | Windows | C |
| table-warning | Edge 80.0 | Windows | A |
| table-info | Opera 66.0 | All Platforms | A |
Borderless Table
No borders
Add .table-borderless for a table without borders.
| Browser | Platform(s) | Engine | Grade |
|---|---|---|---|
| Internet Explorer 5.0 | Win 95+ | 5 | C |
| Firefox 1.0 | Win 98+ / OSX.2+ | 1.7 | A |
| Camino 1.0 | OSX.2+ | 1.8 | A |
| Netscape 7.2 | Mac OS 8.6-9.2 | 1.7 | A |
Striped Dark Table
Dark with stripes
Combine .table-dark with .table-striped for dark striped tables.
| Browser | Platform(s) | Engine | Grade |
|---|---|---|---|
| Internet Explorer 5.0 | Win 95+ | 5 | C |
| Firefox 1.0 | Win 98+ / OSX.2+ | 1.7 | A |
| Camino 1.0 | OSX.2+ | 1.8 | A |
| Netscape 7.2 | Mac OS 8.6-9.2 | 1.7 | A |
Table with Caption
Caption element
A caption functions like a heading for a table.
| Browser | Platform(s) | Engine | Grade |
|---|---|---|---|
| Internet Explorer 5.0 | Win 95+ | 5 | C |
| Firefox 1.0 | Win 98+ / OSX.2+ | 1.7 | A |
| Camino 1.0 | OSX.2+ | 1.8 | A |
| Netscape 7.2 | Mac OS 8.6-9.2 | 1.7 | A |
Active Tables
Highlight rows/cells
Highlight a table row or cell by adding .table-active class.
| Browser | Platform(s) | Engine | Grade |
|---|---|---|---|
| Internet Explorer 5.0 | Win 95+ | 5 | C |
| Firefox 1.0 | Win 98+ / OSX.2+ | 1.7 | A |
| Camino 1.0 | OSX.2+ | 1.8 | A |
| Netscape 7.2 | Mac OS 8.6-9.2 | 1.7 | A |
Table with Footer
Header and footer
Tables can have a tfoot element for table footer content.
| Product | Quantity | Price | Total |
|---|---|---|---|
| Widget A | 10 | $25.00 | $250.00 |
| Widget B | 5 | $50.00 | $250.00 |
| Widget C | 20 | $10.00 | $200.00 |
| Grand Total | $700.00 | ||
