Erweitern von CSS-Hover-Effekten über Zellgrenzen hinaus: Hervorheben von Tabellen in Spalten und Spaltengruppen

Bei der Anzeige von Daten in Tabellenform werden bestimmte Zellen beim Hover hervorgehoben ist oft wünschenswert. Allerdings kann die Hervorhebung der Zeile und Spalte, die sich mit der schwebenden Zelle überschneiden, die Datenklarheit weiter verbessern. Dies ist besonders nützlich, wenn die Tabelle mehrere Maßeinheiten umfasst.

Reine CSS-Lösung

Glücklicherweise ist die Erzielung dieses erweiterten Hervorhebungseffekts mit reinem CSS möglich. Durch die Verwendung von Pseudoelementen (::before, ::after), Z-Index-Manipulation und absoluter Positionierung können wir Hervorhebungsüberlagerungen erstellen, die über Zellgrenzen hinausgehen.

Implementierung

Der folgende CSS-Code veranschaulicht die Implementierung:

table {
    overflow: hidden;
    z-index: 1;
}

td, th {
    cursor: pointer;
    padding: 10px;
    position: relative;
}

td:hover::before,
.row:hover::before { 
    background-color: #ffa;
    content: '\00a0';  
    height: 100%;
    left: -5000px;
    position: absolute;  
    top: 0;
    width: 10000px;   
    z-index: -1;        
}

td:hover::after,
.col:hover::after { 
    background-color: #ffa;
    content: '\00a0';  
    height: 10000px;    
    left: 0;
    position: absolute;  
    top: -5000px;
    width: 100%;
    z-index: -1;        
}

HTML-Struktur

Die entsprechende HTML-Struktur enthält zusätzliche Klassen .row und .col für Zeilen- bzw. Spaltenüberschriften: