Tables
Bootstrap 5.3 .table variants with responsive wrappers, captions, footers, and interactive cells. Borders and surfaces follow data-bs-theme; Elementer adds card shells, toolbars, sticky headers, and a fixed dark datasheet block under .tables-page-bs5.
Responsive & accessible
Wrap wide tables in .table-responsive (or breakpoint variants like .table-responsive-md). Use <caption class="caption-top"> for titles, scope="col" / scope="row" on headers, and keep action buttons with visible text or aria-label.
Foundation
Basic + caption-top
Default table inherits --bs-table-* variables so zebra and borders track the active theme.
| # | First | Last | Role | Phone |
|---|---|---|---|---|
| 1 | John | Doe | CEO | +3 555 6870 |
| 2 | Anna | Cabana | Design | +3 434 6593 |
| 3 | Kai | Thornton | Engineering | +3 285 4288 |
Inverted surface
.table-dark
Bootstrap 5 replaces legacy .table-inverse with .table-dark.
| SKU | Product | Qty |
|---|---|---|
| A-100 | Desk mat | 120 |
| A-102 | USB-C hub | 45 |
| A-110 | Webcam | 18 |
Column stripes
.table-striped-columns
Alternating columns instead of rows — pair with .table-striped if you want both.
| Q1 | Q2 | Q3 | Q4 |
|---|---|---|---|
| 12% | 18% | 22% | 28% |
| Revenue | Revenue | Revenue | Forecast |
Row stripes
.table-striped
| Invoice | Customer | Total |
|---|---|---|
| #2041 | Northwind | €1,240 |
| #2042 | Contoso | €892 |
| #2043 | Fabrikam | €2,018 |
Hover + bordered
Dense interactions
| Status | Job | Runtime |
|---|---|---|
| OK | Deploy | 2m 14s |
| Warn | Lint | 48s |
| Idle | Cache warm | — |
Header & footer
thead variants + tfoot
| Department | Budget | Spend |
|---|---|---|
| Product | 500k | 412k |
| GTM | 220k | 198k |
| Support | 140k | 121k |
| Total | 860k | 731k |
Borderless
.table-borderless
| Owner | you@elementer.dev |
|---|---|
| Plan | Pro · billed yearly |
| Renewal | 30 Mar 2027 |
Contextual rows
Semantic highlights
| # | Note |
|---|---|
| 1 | Selected row · .table-active |
| 2 | Primary emphasis |
| 3 | Success state |
| 4 | Warning state |
| 5 | Danger / blocked |
Grouped sections
.table-group-divider
Thicker separator between logical blocks of rows.
| Code | Name | Region |
|---|---|---|
| EU-1 | Dublin | Europe |
| EU-2 | Frankfurt | Europe |
| US-1 | Oregon | Americas |
| US-2 | Virginia | Americas |
| Select | Service | Channel | Health | Actions |
|---|---|---|---|---|
| api-gateway | prod | 92 percent uptime |
|
|
| worker-mail | staging |
|
Toolbar + checkbox column + inline progress motif + icon buttons — pattern for admin dashboards.
Sticky header
Scroll body, fixed thead
Scoped with .table-sticky-wrap — cap height and overflow on the wrapper.
| ID | Event | User |
|---|---|---|
| 901 | login | ada |
| 902 | deploy | ci-bot |
| 903 | config | ada |
| 904 | export | marie |
| 905 | login | wei |
| 906 | error | api |
| 907 | retry | worker |
| 908 | login | ada |
Responsive breakpoint
.table-responsive-lg
Horizontal scroll only below the chosen breakpoint.
| A | B | C | D | E | F |
|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 |
| 7 | 8 | 9 | 10 | 11 | 12 |
Live tail · dark sheet
| Time | Level | Message |
|---|---|---|
| 10:01:02 | info | Request completed in 42ms |
| 10:01:04 | warn | Retry scheduled · upstream 503 |
| 10:01:09 | error | Circuit open · payments |
Composition
Beyond the table
.pagination for paging, .dropdown-menu for row actions at small widths, and .offcanvas for filters. For very wide datasets prefer column toggles or a “column manager” modal instead of squeezing every field into one grid.