old-computers.com/website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Tables with a header row can be sorted by clicking a column header

Browse Source 
Listing tables on company, taxonomy and generic list pages get column headers.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01YDRjtmAiNpo5mK5N3d7QwZ
This commit is contained in:
yann64
2026-10-12 21:03:41 +02:00
co-authored by Claude Opus 5.5
parent c913d792c4
commit dfb2d2ce68
7 changed files with 83 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/main.css
+12 -5
View File
@@ -72,14 +72,21 @@ small, .meta, .note, .crumbs { color: var(--muted); }
table { border-collapse: collapse; }
.specs, .list { width: 100%; clear: both; margin: 16px 0; background: var(--panel); }
.specs th, .specs td, .list td { padding: 6px 10px; border: 1px solid var(--line); text-align: left; vertical-align: top; }
.specs th, .specs td, .list th, .list td { padding: 6px 10px; border: 1px solid var(--line); text-align: left; vertical-align: top; }
.specs th { width: 30%; font-size: 0.8rem; letter-spacing: 0.5px; color: var(--muted); }
.list { table-layout: fixed; }
.list td:first-child { width: 45%; }
.list td:nth-child(2) { width: 12%; }
.list td:nth-child(4) { width: 15%; }
.list :is(th, td):first-child { width: 45%; }
.list :is(th, td):nth-child(2) { width: 12%; }
.list :is(th, td):nth-child(4) { width: 15%; }
.list { font-size: 0.95rem; }
@media (max-width: 600px) { .list td:nth-child(4) { display: none; } }
@media (max-width: 600px) { .list :is(th, td):nth-child(4) { display: none; } }
.list thead th { font-size: 0.8rem; letter-spacing: 0.5px; color: var(--muted); }
.content th { padding: 6px 10px; text-align: left; }
.sortable th { cursor: pointer; user-select: none; white-space: nowrap; }
.sortable th:hover, .sortable th:focus-visible { color: var(--text, inherit); text-decoration: underline; }
.sortable th::after { content: " ↕"; opacity: 0.4; }
.sortable th[aria-sort="ascending"]::after { content: " ↑"; opacity: 1; }
.sortable th[aria-sort="descending"]::after { content: " ↓"; opacity: 1; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.gallery figure, .thumbs a, .card, .comments li {