Components
Table
Data tables with a muted header row; wrap in .ct-table-wrap to scroll sideways.
Live example
Rendered with the real classes from /site/chitransit.css, light (left) and dark (right).
| Key | Calls | Share |
|---|---|---|
| ios | 41,200 | 62% |
| web | 9,870 | 15% |
.ct-table-wrap · .ct-table--numericCode
<div class="ct-table-wrap"><table class="ct-table ct-table--numeric"><tr><th>Key</th><th>Calls</th><th>Share</th></tr><tr><td>ios</td><td>41,200</td><td>62%</td></tr><tr><td>web</td><td>9,870</td><td>15%</td></tr></table></div>Tokens
From tokens/components.tokens.json. Override one instance by setting the property without the ct- prefix.
| Custom property | Value | Alias |
|---|---|---|
--ct-table-cell-padding-x | var(--space-12) | {space.s12} |
--ct-table-cell-padding-y | var(--space-10) | {space.s10} |
--ct-table-font-size | 14px | |
--ct-table-head-background | var(--card) | {colors.card} |
--ct-table-head-color | var(--muted) | {colors.muted} |
--ct-table-head-font-size | var(--fs-cap) | {type.cap} |
--ct-table-head-tracking | .04em | |
--ct-table-rule | var(--line) | {colors.line} |
Usage
Do
- Wrap a table in
.ct-table-wrapso it scrolls sideways on narrow screens. - Use
--numericto right-align digits with tabular figures.
Don't
- Don't use tables for layout.
Accessibility
- Use
<th>for headers so screen readers announce them per cell.