Skip to content

Instantly share code, notes, and snippets.

@greggman
Created February 13, 2026 23:15
Show Gist options
  • Select an option

  • Save greggman/4a11b7dd3514866a4cd46a1220e69867 to your computer and use it in GitHub Desktop.

Select an option

Save greggman/4a11b7dd3514866a4cd46a1220e69867 to your computer and use it in GitHub Desktop.
HTML: Nested Table Colors
:root {
color-scheme: light dark;
--bg-c: 0.15;
--bg-l: 0.7;
--bg: 150;
}
@media (prefers-color-scheme: dark) {
:root {
--bg-l: 0.3;
}
}
table {
background-color: oklch(var(--bg-l) var(--bg-c) calc(var(--bg) * var(--nest-level)));
}
table { --nest-level: 1; }
table table { --nest-level: 2; }
table table table { --nest-level: 3; }
table table table table { --nest-level: 4; }
table table table table table { --nest-level: 5; }
table table table table table table { --nest-level: 6; }
<table><tbody>
<tr><td>abc</td><td>def</td></tr>
<tr><td>123</td><td>456</td></tr>
<tr><td>...</td><td>
<table><tbody>
<tr><td>abc</td><td>def</td></tr>
<tr><td>123</td><td>456</td></tr>
<tr><td>...</td><td>
<table><tbody>
<tr><td>abc</td><td>def</td></tr>
<tr><td>123</td><td>456</td></tr>
<tr><td>...</td><td>
</td></tr>
</tbody></table>
</td></tr>
</tbody></table>
</td></tr>
</tbody></table>
/*bug-in-github-api-content-can-not-be-empty*/
{"name":"HTML: Nested Table Colors","settings":{},"filenames":["index.html","index.css","index.js"]}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment