Tables
Use .table on <table> elements. Control density with data-density. Row hover is on by default.
Default
A plain .table with no extra attributes gives you a clean, medium-density table.
| Consultant | Client | Status |
|---|---|---|
| Emma Berg | Acme Corp | Active |
| Lars Holm | TechVent | Active |
| Mia Andersson | FinHub | Bench |
Density
You can set data-density to "compact" or "relaxed" to control cell padding.
Compact
| Consultant | Client | Booked | Invoiced |
|---|---|---|---|
| Emma Berg | Acme Corp | 34.5 / 37.5h | 92% |
| Lars Holm | TechVent | 28.0 / 37.5h | 75% |
| Mia Andersson | FinHub | 37.5 / 37.5h | 100% |
Relaxed
| Consultant | Client | Booked | Invoiced |
|---|---|---|---|
| Emma Berg | Acme Corp | 34.5 / 37.5h | 92% |
| Lars Holm | TechVent | 28.0 / 37.5h | 75% |
| Mia Andersson | FinHub | 37.5 / 37.5h | 100% |
Caption & footer
Use <caption> for a table description and <tfoot> for summary rows. Both are styled automatically.
| Consultant | Jan | Feb | Mar | Apr |
|---|---|---|---|---|
| Emma Berg | 148 | 156 | 142 | 150 |
| Lars Holm | 132 | 140 | 138 | 145 |
| Mia Andersson | 150 | 148 | 155 | 152 |
| Total | 430 | 444 | 435 | 447 |