Table Component
Table styling utilities from preset.css and table.css. The base <table> gets default borders, small header text, and hover on rows. Add utility classes for stripes, grid, alignment, states, and frozen columns.
Notes
- Base
<table> already has row borders, small header text (description color), and cell padding.
- States:
table-selected (highlight), table-disabled (dim), table-focused (cell outline).
- Styles:
table-stripe (odd rows), table-stripe-even, table-hoverable, table-intercell (cell hover), table-crossable (cross highlight).
- Borders:
table-borderless, table-bordered, table-grid.
- Alignment:
table-start/center/end/left/right (horizontal), table-top/bottom/middle (vertical).
- Container:
table-wrapper (scrollable), table-fixed-header, table-fixed-start, table-fixed-end.
Basic table
| Name | Department | Role | Status |
|---|
| Zhang San | Engineering | Sr. Engineer | Active |
| Li Si | Marketing | Manager | Active |
| Wang Wu | HR | Specialist | On leave |
With tfoot
| Project | Budget | Actual | Balance |
|---|
| Project A | $100K | $85K | $15K |
| Project B | $200K | $210K | -$10K |
| Total | $300K | $295K | $5K |
|---|
States
table-selected (row highlight)
| Name | Status |
|---|
| Zhang San | Active |
| Li Si | Active (selected) |
| Wang Wu | On leave |
table-disabled (dimmed)
| Account | Status |
|---|
| admin | Normal |
| deleted_user | Deleted |
| editor | Normal |
table-focused (cell outline)
| Name | Email | Role |
|---|
| Zhang San | zs@example.com | Admin |
| Li Si | li@example.com | Editor |
Styles
table-stripe (odd rows)
| # | Product | Price |
|---|
| 1 | Laptop | $999 |
| 2 | Mouse | $49 |
| 3 | Keyboard | $129 |
| 4 | Monitor | $399 |
table-stripe-even
| # | Product | Price |
|---|
| 1 | Laptop | $999 |
| 2 | Mouse | $49 |
| 3 | Keyboard | $129 |
| 4 | Monitor | $399 |
table-hoverable (row hover)
| Name | Email |
|---|
| A | a@test.com |
| B | b@test.com |
| C | c@test.com |
table-intercell (cell hover outline)
| Name | Email |
|---|
| A | a@test.com |
| B | b@test.com |
table-crossable (cross highlight)
| Date | Sales | Orders |
|---|
| Apr 1 | $12,500 | 45 |
| Apr 2 | $8,900 | 32 |
| Apr 3 | $15,200 | 58 |
Stripe + hover combined
| Date | Sales | Orders |
|---|
| Apr 1 | $12,500 | 45 |
| Apr 2 | $8,900 | 32 |
| Apr 3 | $15,200 | 58 |
| Apr 4 | $10,800 | 41 |
Borders
table-bordered (with side borders)
Grid + selected
| Name | Role |
|---|
| A | Admin |
| B | Editor (selected) |
Alignment
table-start (left, default)
table-top (vertical)
| Name | Note |
|---|
| A | Line 1
(top aligned) |
table-bottom (vertical)
| Name | Note |
|---|
| A | Line 1
(bottom aligned) |
Layout
table-nowrap
| Name | Very long content that won't wrap |
|---|
| A | This is a very long text that stays on one line |
Container (table-wrapper)
table-wrapper + table-fixed-header
table-wrapper + table-fixed-end
| Name | Email | Department | Role | Status |
|---|
| Zhang San | zs@example.com | Engineering | Sr. Engineer | Active |
| Li Si | ls@example.com | Marketing | Manager | Active |
| Wang Wu | ww@example.com | HR | Specialist | On leave |
table-wrapper + table-fixed-start
| Name | Email | Department | Role | Status |
|---|
| Zhang San | zs@example.com | Engineering | Sr. Engineer | Active |
| Li Si | ls@example.com | Marketing | Manager | Active |
| Wang Wu | ww@example.com | HR | Specialist | On leave |
table-wrapper + table-fixed-start + table-fixed-header
table-wrapper + table-fixed-start + table-fixed-end
| Name | Email | Department | Role | Status |
|---|
| Zhang San | zs@example.com | Engineering | Sr. Engineer | Active |
| Li Si | ls@example.com | Marketing | Manager | Active |
| Wang Wu | ww@example.com | HR | Specialist | On leave |
table-wrapper + table-fixed-end + table-fixed-header