Tables
Documentation and examples for styling tables with boodoo.
Overview
Use the .table class to add basic styling to a <table> element.
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
Variants
Use contextual classes to color tables, table rows, or individual cells.
| Class | Heading | Heading |
|---|---|---|
| Default | Cell | Cell |
| Primary | Cell | Cell |
| Success | Cell | Cell |
| Danger | Cell | Cell |
| Warning | Cell | Cell |
Striped rows
Use .table-striped to add zebra-striping to any table row within the <tbody>.
| # | First | Last |
|---|---|---|
| 1 | Mark | Otto |
| 2 | Jacob | Thornton |
| 3 | Larry | the Bird |
Hoverable rows
Add .table-hover to enable a hover state on table rows.
| # | First | Last |
|---|---|---|
| 1 | Mark | Otto |
| 2 | Jacob | Thornton |
| 3 | Larry the Bird | |
Bordered tables
| # | First | Last |
|---|---|---|
| 1 | Mark | Otto |
| 2 | Jacob | Thornton |
Small tables
Add .table-sm to make tables compact by cutting cell padding in half.
| # | First | Last |
|---|---|---|
| 1 | Mark | Otto |
| 2 | Jacob | Thornton |
Responsive tables
Responsive tables allow tables to be scrolled horizontally with ease. Wrap .table in
.table-responsive so it becomes scrollable.
| # | Heading | Heading | Heading | Heading | Heading | Heading |
|---|---|---|---|---|---|---|
| 1 | Cell | Cell | Cell | Cell | Cell | Cell |
| 2 | Cell | Cell | Cell | Cell | Cell | Cell |
Responsive tables can also be limited to a specific breakpoint with classes like .table-responsive-md.