Mettre en surbrillance ligne et colonne au survol d’une table Aujourd’hui, il nous est possible de faire énormément de choses avancés en CSS. Cependant quelque chose qui semble plus ou moins simple n’est pas toujours aussi simple que ce que l’on espérait, voir pas du tout. Le projet sur lequel je travaille affiche énormement de table de données (). Pour certaines d’entre elles, j’aimerais pouvoir mettre en surbrillance la ligne et la colonne qui prolongent cellule que je survole… 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. Comment cibler une ligne de la table ? Très simplement, en utilisant la pseudo-classe hover sur la ligne ( 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(), dans toutes les lignes, sélectionner la colonne numéro 3 et lui afficher un background différent. En CSS, en combinant de simple propriétés comme position, overflow et un pseudo-élément ::before, on pourrait s’étendre un peu plus loin que la cellule. Publié par Alsacreations.com