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 |