CSS - Visuelle Orientierung in Tabelle

[Gunnar Bittersmann]

@@Rolf B

tbody tr:hover th {
   background-color: #ffc;
}

Damit würde die th Zelle in den body-Rows eine gelbe Hintergrundfarbe bekommen, wenn die Maus irgendwo in der Zeile schwebt.

Eben: irgendwo. Auch über der Kopfzelle. Soll die Kopfzelle auch gehighlightet werden, wenn sich der Zeiger über dieser befindet? Oder nur, wenn sich der Zeiger über einer Datenzellen in dieser Zeile befindet? Ich denke, letzteres. Also den Selektor angepasst:

tbody tr:has(td:hover) th {
   background-color: #ffc;
}

---

Für Spalten geht das nicht.

🤣 Hold my beer!

Klar geht das:

thead:has(~ tbody td:nth-child(2):hover) th:nth-child(2),
thead:has(~ tbody td:nth-child(3):hover) th:nth-child(3),
thead:has(~ tbody td:nth-child(4):hover) th:nth-child(4) {
   background-color: #ffc;
}

Für wieviele Spalten man das vorsehen muss, hängt von der jeweiligen Tabelle ab. Und ein CSS-Präprozessor ist dabei hilfreich.

Einfach wie das kleine Einmaleins.

Funktioniert in Safari und Chromia. Firefox hinkt bei :has() noch etwas hinterher. Da es sich hierbei um ein sinnvolles, aber nicht zwingend notweniges Feature handelt, kann man auf progressive enhancement setzen. Irgendwann in nicht allzuferner Zukunft wird es auch im Firefox funktionieren, ohne dass man dazu nochmal was am Code ändern müsste.

🖖 Живіть довго і процвітайте