Comment rendre les liens des cellules du tableau cliquables sur toute la hauteur de la ligne ?

Remplir verticalement une ligne de tableau avec des liens de cellule

Dans les tableaux HTML, les utilisateurs s'attendent à pouvoir cliquer n'importe où dans une cellule pour suivre le lien associé lien. Cependant, lorsque les cellules du tableau s'étendent sur plusieurs lignes et que d'autres sont sur une seule ligne, les cellules sur une seule ligne peuvent ne pas occuper tout l'espace vertical de la ligne.

Pour remédier à ce problème, définissez la propriété d'affichage des liens des cellules du tableau. bloquer est une approche courante. Cependant, cela peut ne pas résoudre complètement le problème dans tous les cas.

Solution

Pour garantir que les liens des cellules du tableau remplissent toute la hauteur de la ligne, implémentez la règle CSS suivante :

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

En définissant une marge négative arbitrairement grande et un remplissage égal sur l'élément de bloc, le lien s'étendra sur tout l'espace vertical de la ligne du tableau. La propriété overflow est définie sur masquée sur l'élément td parent pour empêcher le remplissage excessif de se répandre à l'extérieur de la cellule.

Exemple

<code class="html"><td style="overflow: hidden;">
    <a style="display: block; margin: -10em; padding: 10em;" href="http://www.google.com/">Cell 1</a>
</td></code>

Ce CSS mis à jour garantira que les cellules du tableau contenant des liens sont toujours cliquables sur toute leur hauteur, quel que soit le nombre de lignes qu'elles couvrent.

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!