Comment puis-je m'assurer que les liens des cellules du tableau couvrent toute la hauteur de la ligne ?

Assurez-vous que les liens entre les cellules du tableau s'étendent sur toute la hauteur de la ligne

Lors de la présentation des données au format tabulaire, il est souvent souhaitable de créer des liens cliquables dans chaque cellule du tableau. . Pour vous assurer que ces liens sont pleinement fonctionnels, quelle que soit la hauteur de la cellule, pensez à mettre en œuvre la technique suivante :

Dans votre code CSS, appliquez les styles suivants :

<code class="css">td {
    overflow: hidden;
}
td a {
    display: block;  /* Allow links to fill the full height */
    margin: -10em;   /* Create a large negative vertical margin */
    padding: 10em;  /* Add an equal amount of vertical padding to compensate */
}</code>

En définissant une marge négative et un remplissage correspondant, vous créez effectivement l'illusion que les liens remplissent toute la hauteur de la cellule. La marge négative pousse le contenu du lien au-delà de la zone visible, tandis que le remplissage ajoute un espace vertical pour correspondre à la ligne du tableau environnant.

Cette solution garantit que même si une cellule contient plusieurs lignes de texte alors que d'autres cellules n'ont qu'une sur une seule ligne, les liens de toutes les cellules sont cliquables quelle que soit leur hauteur. Les utilisateurs peuvent cliquer n'importe où dans la cellule pour déclencher l'action du lien.

Exemple de code HTML avec le CSS mis à jour :

<code class="html"><table border="1">
  <tbody>
    <tr>
      <td><a href="link1.html">Cell 1 with multiple lines</a></td>
      <td><a href="link2.html">Cell 2 with single line</a></td>
      <td><a href="link3.html">Cell 3 with single line</a></td>
    </tr>
  </tbody>
</table></code>

Le résultat est un tableau dans lequel les utilisateurs peuvent cliquer n'importe où dans une cellule pour suivez le lien correspondant, même dans les lignes avec des hauteurs de cellules variables.

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!