Mettre en surbrillance ligne et colonne au survol d'une table

Astucecss

Publié par le (10869 lectures)

Aujourd'hui, il nous est possible de faire énormément de choses avancés en CSS. Cependant quelque chose qui semble ± simple n'est pas toujours aussi simple que ce que l'on espère, voir pas du tout. Le projet sur lequel je travaille affiche énormément de table de données (<table>). Pour certaines d'entre elles, j'aimerais pouvoir mettre en surbrillance la ligne et la colonne de la cellule que je survole…

Un bouton burger sous forme de 3 rectangles

Il est évident qu'il existe de moches solutions avec Javascript (hum hum), mais il est aussi très simple de le faire avec CSS (codepen).

Comment cibler une ligne de la table ?

Très simplement, en utilisant la pseudo-classe hover sur la ligne (<tr> table-row), on peut changer son background-color.

tr:hover {
  background: antiquewhite;
}

Comment cibler une colonne de la table ?

Un peu plus compliqué pour cette partie…

En Javascript, il est plutôt facile de récupérer l'index de la colonne pour ensuite utiliser CSS et une pseudo-classe :nth-child(). Pour toutes les lignes, sélectionner la colonne numéro 4, et lui afficher un background différent.

En CSS, on ne peut pas connaître son index (à l'exception de first et last), remonter la structure et ensuite réappliquer plus loin. Par contre, en combinant de simple propriétés comme position, overflow et un pseudo-élément ::before, on pourrait créer l'illusion en s'étendant verticalement un peu plus loin que la cellule.

td {
  position: relative;

  &:hover::before {
    content: "";
    position: absolute;
    inset: -100vh 0; /* https://developer.mozilla.org/fr/docs/Web/CSS/inset */
    background: antiquewhite;
    z-index: -1; /* On positione le pseudo-élément en arrière plan */
  }
}

Avec inset: -100vh 0 (équivalent à top: -100vh; right: 0; bottom: -100vh; left: 0;), on va prendre la largeur de la cellule et s'étendre en hauteur.

Maintenant, nous avons bien une surbrillance qui se fait sur les deux axes. Il y a cependant notre colonne qui s'étend un peu trop. En ajoutant un simple overflow: hidden sur notre table, on contiendra tout ça.

Voir le résultat

Commentaires

@VincentValentin : oui, votre solution fonctionne mais pour un nombre de lignes limité. Et heureusement que vous vous êtes arrêté à une définition pour dix lignes max. car vous avez vu la taille du code de sortie de votre pré-processeurs ?

Saluons l'effort tout de même, mais reconnaissez que ce n'est pas une solution viable.

Commenter

Vous devez être inscrit et identifié pour utiliser cette fonction.

Connectez-vous (déjà inscrit)

Oubli de mot de passe ? Pas de panique, on va le retrouver

Pas encore inscrit ? C'est très simple et gratuit.