Extension des effets de survol CSS au-delà des limites des cellules : mise en surbrillance des tableaux dans les colonnes et les groupes de colonnes

Lors de l'affichage des données sous forme de tableau, mise en surbrillance de cellules spécifiques au survol est souvent souhaitable. Cependant, la mise en évidence de la ligne et de la colonne qui croisent la cellule survolée peut améliorer encore la clarté des données. Ceci est particulièrement utile lorsque le tableau s'étend sur plusieurs unités de mesure.

Solution CSS pure

Heureusement, il est possible d'obtenir cet effet de surbrillance étendu avec du CSS pur. En utilisant des pseudo-éléments (::before, ::after), la manipulation du z-index et le positionnement absolu, nous pouvons créer des superpositions de surbrillance qui s'étendent au-delà des limites des cellules.

Mise en œuvre

Le code CSS suivant illustre l'implémentation :

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;        
}

Structure HTML

La structure HTML correspondante comprend des classes supplémentaires .row et .col pour les en-têtes de ligne et de colonne, respectivement :