v148 · CSS · UA stylesheet
Table Styling Reset
Five table designs that rely purely on color inheritance — no explicit border-color anywhere. Drag the color picker and watch all borders follow. Toggle "Before Chrome 148" to see the old UA rule re-impose hard-coded grey borders.
The fix: Chrome 148 removed the UA stylesheet rule
table { border-color: gray }. Table borders now inherit currentColor from the surrounding text color — just like every other HTML element. No more workarounds needed for themed tables.
Applied:
color: #1a1a1a — all table borders inherit this color via currentColor. No border-color set anywhere on these tables.
1. Minimal
inherits text color| Country | Capital | Pop. |
|---|---|---|
| Japan | Tokyo | 125M |
| Brazil | Brasília | 215M |
| Kenya | Nairobi | 55M |
/* Zero border-color declarations */
.t-minimal th, .t-minimal td {
border: 1px solid; /* inherits */
}
2. Dark mode
light-on-dark, auto border| Command | Effect |
|---|---|
| git commit | Save snapshot |
| git push | Upload to remote |
| git pull | Fetch + merge |
/* Light text on dark bg — border follows text */
.t-dark { color: var(--bg-stone); background: var(--text-charcoal); }
.t-dark th, .t-dark td { border: 1px solid; }
3. Colored headers
thead uses accent color| API | Type | Status |
|---|---|---|
| fetch() | Promise | Baseline |
| LanguageModel | Async | Origin trial |
| SharedWorker | Event | Stable |
/* thead colored, tbody default — borders match each row's color */
.t-colored-head thead { color: var(--accent-blue); }
.t-colored-head tbody { color: var(--text-charcoal); }
/* No border-color needed anywhere */
4. Striped rows
even rows tinted via currentColor| Framework | Stars | License |
|---|---|---|
| React | 220k | MIT |
| Vue | 207k | MIT |
| Svelte | 79k | MIT |
| Angular | 93k | MIT |
/* Even rows tinted with color-mix — still no border-color */
.t-striped tr:nth-child(even) {
background: color-mix(in srgb, currentColor 6%, transparent);
}
5. Financial report
professional look — pure inheritance| Metric | Q1 | Q2 | Q3 | Q4 |
|---|---|---|---|---|
| Revenue | $1.2M | $1.8M | $2.1M | $2.4M |
| Costs | $0.9M | $1.1M | $1.3M | $1.4M |
| Growth | +12% | +50% | +17% | +14% |
| Variance | -2% | +3% | -1% | +5% |
| Annual | $7.5M revenue · $4.7M costs · $2.8M profit | |||
/* All borders from color inheritance — accent colors for positive/negative */
.t-financial th, .t-financial td { border: 1px solid; }
.t-financial .positive { color: var(--accent-emerald); }
.t-financial .negative { color: var(--accent-rose); }
/* Before Chrome 148: all borders were #808080 (gray) regardless of color */
What changed in the UA stylesheet
/* Before Chrome 148 — UA stylesheet included: */
table { border-color: gray; }
td, th { border-color: gray; }
/* After Chrome 148 — these rules are REMOVED.
border-color is no longer set by the UA on table elements.
Tables now inherit from currentColor like everything else. */
/* Migration: if you relied on the gray default, add it back explicitly: */
table td, table th { border-color: gray; } /* opt-in to old behavior */
/* Or embrace the new default — just set color, no border-color needed: */
.my-table { color: navy; } /* borders also go navy — no extra rule! */references
implementation reference
Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗