Comment faire en sorte que les liens aient la même hauteur que les lignes du tableau ?

Faire en sorte que le lien ait la même hauteur que la ligne du tableau

Dans le formatage de tableau, des liens peuvent être placés dans chaque cellule pour faciliter l'interaction de l'utilisateur. Cependant, lorsque le contenu des cellules varie en hauteur, les liens peuvent ne pas remplir tout l'espace vertical de la ligne, ce qui entraîne une apparence indésirable.

Pour résoudre ce problème, le style CSS des cellules du tableau et leurs éléments de lien peuvent être modifiés :

1. Affichage de l'outil : Bloc :

<code class="css">td a {
    display: block;
}</code>

2. Définir une marge négative et un remplissage égal :
Pour tenir compte des cellules comportant plusieurs lignes, définissez une grande marge négative et un remplissage égal sur l'élément de bloc. Cela force le lien à s'étendre et à remplir tout l'espace.

<code class="css">td a {
    ...
    margin: -10em;
    padding: 10em;
}</code>

3. Empêcher le débordement :
Pour garantir que le contenu débordant est masqué, ajoutez ce qui suit à l'élément parent :

<code class="css">td {
    overflow: hidden;
}</code>

Un exemple illustrant cette technique :

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

Avec ces ajustements, les liens rempliront désormais toute la hauteur de la ligne du tableau, offrant une expérience utilisateur plus uniforme et interactive.

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!