Skip to main content

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.

Team directory
# 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-100Desk mat120
A-102USB-C hub45
A-110Webcam18

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%
RevenueRevenueRevenueForecast

Row stripes

.table-striped

Invoice Customer Total
#2041Northwind€1,240
#2042Contoso€892
#2043Fabrikam€2,018

Hover + bordered

Dense interactions

Status Job Runtime
OKDeploy2m 14s
WarnLint48s
IdleCache warm

Header & footer

thead variants + tfoot

Totals include tax · FY 2026
Department Budget Spend
Product500k412k
GTM220k198k
Support140k121k
Total 860k 731k

Borderless

.table-borderless

Owneryou@elementer.dev
PlanPro · billed yearly
Renewal30 Mar 2027

Contextual rows

Semantic highlights

#Note
1Selected row · .table-active
2Primary emphasis
3Success state
4Warning state
5Danger / blocked

Grouped sections

.table-group-divider

Thicker separator between logical blocks of rows.

CodeNameRegion
EU-1DublinEurope
EU-2FrankfurtEurope
US-1OregonAmericas
US-2VirginiaAmericas
Deployments 12 environments
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.

IDEventUser
901loginada
902deployci-bot
903configada
904exportmarie
905loginwei
906errorapi
907retryworker
908loginada

Responsive breakpoint

.table-responsive-lg

Horizontal scroll only below the chosen breakpoint.

ABCDEF
123456
789101112

Live tail · dark sheet

Time Level Message
10:01:02infoRequest completed in 42ms
10:01:04warnRetry scheduled · upstream 503
10:01:09errorCircuit open · payments

Composition

Beyond the table

Pair tables with .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.