Tables
Basic table
Basic tables use the
.table
class for standard data display.
| # | Name | Status | |
|---|---|---|---|
| 1 | John Doe | john@example.com | Active |
| 2 | Jane Smith | jane@example.com | Inactive |
Striped table
Striped tables use
.table-striped
to add zebra-striping to rows.
| # | Product | Price | Stock |
|---|---|---|---|
| 1 | Laptop | $1200 | In stock |
| 2 | Mouse | $25 | Out of stock |
Hover table
Hover tables use
.table-hover
to highlight rows on mouse over.
| # | User | Role | Status |
|---|---|---|---|
| 1 | Admin | Administrator | Active |
| 2 | Editor | Editor | Active |
Bordered table
Bordered tables use
.table-bordered
to add borders to all cells.
| # | Order | Date | Total |
|---|---|---|---|
| 1 | #1023 | 2025-01-10 | $340 |
| 2 | #1024 | 2025-01-11 | $180 |
Small table
Compact tables use
.table-sm
to reduce cell padding.
| # | File | Size | Type |
|---|---|---|---|
| 1 | report.pdf | 1.2 MB | |
| 2 | image.png | 540 KB | PNG |
Responsive table
Responsive tables use
.table-responsive
to enable horizontal scrolling on small screens.
| # | Customer | Country | Orders | Revenue |
|---|---|---|---|---|
| 1 | Carlos | Peru | 12 | $2,400 |
| 2 | Anna | Germany | 8 | $1,750 |
Combined table styles
Tables can combine styles using
.table-{striped|hover|bordered|sm}
together.
| # | Project | Manager | Status |
|---|---|---|---|
| 1 | Dashboard UI | Guido | In progress |
| 2 | API Integration | Maria | Completed |