Table
Tables are full width with header, body and footer lines. Add a class for stripes, hover or a sticky header.
| Plan | Projects | Price |
|---|---|---|
| Free | 3 | $0 |
| Pro | Unlimited | $12 |
| Team | Unlimited | $40 |
| Billed | Monthly | |
Cells use even digit widths, so number columns line up.
Striped
| Name | Role |
|---|---|
| Ada | Engineer |
| Grace | Admiral |
| Alan | Mathematician |
| Linus | Maintainer |
Hover
.hover highlights the row under the pointer.
| Order | Status |
|---|---|
| #1042 | Shipped |
| #1043 | Packing |
| #1044 | Paid |
Sticky header
.sticky keeps the header in view while the page scrolls. Inside a
.table-responsive wrapper with a max height, it sticks to the wrapper instead.
| Shade | Variable |
|---|---|
| 50 | --i-color-blue-50 |
| 100 | --i-color-blue-100 |
| 200 | --i-color-blue-200 |
| 300 | --i-color-blue-300 |
| 400 | --i-color-blue-400 |
| 500 | --i-color-blue-500 |
| 600 | --i-color-blue-600 |
Sizes
.small, .medium and .large change the cell padding and font size.
| Small | Compact rows |
| Table | For dense data |
| Large | Roomy rows |
Responsive
Wrap a wide table in .table-responsive to scroll it sideways instead of the page. Keyboard users can only scroll it once it can take focus, so give it tabindex="0" and an aria-label.
| Mon | Tue | Wed | Thu | Fri | Sat | Sun | Total |
|---|---|---|---|---|---|---|---|
| 1,204 visits | 1,388 visits | 1,512 visits | 1,470 visits | 1,290 visits | 860 visits | 790 visits | 8,514 visits |
Variables
| Variable | Default |
|---|---|
--i-table-header-border-width | var(--i-border-width) |
--i-table-header-font-weight | 600 |
--i-table-color-border | var(--i-color-subtle-border) |
--i-table-header-color-background | var(--i-color-background) |
--i-table-row-striped-color-background | #6f78870a |
--i-table-row-hover-color-background | color-mix(in oklab, var(--i-color-text) 8%, transparent) |