Comment étendre les effets de survol CSS au-delà des limites des cellules dans les tableaux ?

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

Lors de l'affichage de 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, obtenir cet effet de surbrillance étendu est possible 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: '<pre class="brush:php;toolbar:false"><table border="1">
    <tr>
        <th></th>
        <th>

a0'; height: 100%; left: -5000px; position: absolute; top: 0; width: 10000px; z-index: -1; } td:hover::after, .col:hover::after { background-color: #ffa; content: 'a0'; 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 la ligne et en-têtes de colonnes, respectivement :

Exemple de sortie

Le survol d'une cellule met désormais en surbrillance la ligne et la colonne correspondantes :

[Image de un tableau avec une ligne et une colonne en surbrillance]

Cette approche fonctionne de manière transparente dans les navigateurs modernes et se dégrade gracieusement dans les navigateurs plus anciens.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!