Comment étendre les liens des cellules du tableau pour remplir la hauteur des lignes ?

Extension des liens de cellules de tableau pour remplir la hauteur des lignes

Dans une visualisation de données tabulaires, les liens de cellules ne parviennent souvent pas à couvrir tout l'espace vertical d'un rangée, surtout lorsque les cellules ont des hauteurs variables. Cela peut gêner l'interaction de l'utilisateur, car cliquer sur une cellule partiellement couverte peut ne pas déclencher l'action souhaitée.

Pour résoudre ce problème, la technique suivante peut être utilisée :

Définir la marge et Remplissage de l'extension de lien Drive

1. Appliquer le débordement : masqué aux cellules du tableau parent.
2. Convertissez le lien en élément de bloc à l'aide de display: block.
3. Définissez une marge négative arbitrairement grande (par exemple, -10em) et une quantité égale de remplissage (par exemple, 10em) pour l'élément de bloc.

Exemple d'implémentation de code

<code class="css">td {
    overflow: hidden;
}
td a {
    display: block;
    margin: -10em;
    padding: 10em;
}</code>

Cet ajustement étend le lien au-delà des limites de la cellule du tableau, couvrant efficacement toute la hauteur de la ligne. Les utilisateurs peuvent désormais cliquer n'importe où dans la cellule pour activer le lien, que la cellule comporte ou non plusieurs lignes de contenu.

Reportez-vous à la démonstration JSFiddle mise à jour ici : http://jsfiddle.net/RXHuE/213/

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!