Comment faire en sorte que les liens entre les cellules d'un tableau s'étendent sur toute la hauteur de la ligne ?

Agrandissement des liens des cellules du tableau pour remplir la hauteur des lignes

Lors de la création de tableaux avec des cellules contenant des liens, il est souhaitable de permettre à l'utilisateur de cliquer n'importe où dans une cellule et déclencher l'action du lien. Cependant, lorsque les cellules s'étendent sur plusieurs lignes alors que d'autres dans la même ligne ont moins de lignes, les cellules les plus courtes peuvent ne pas remplir tout l'espace vertical de la ligne.

Pour résoudre ce problème, une approche courante consiste à définir le lien les éléments dans les cellules se comportent comme des éléments de bloc à l’aide de la propriété display: block. Cela permet aux liens de s'étendre sur toute la largeur et la hauteur de la cellule. Cependant, dans les cas où certaines cellules ont plusieurs lignes, les cellules d'une seule ligne peuvent toujours apparaître visuellement plus courtes.

Une solution à ce problème consiste à appliquer une marge négative et un remplissage égal à l'élément de bloc. La marge négative garantit que l'élément de bloc s'étend au-delà des limites de la cellule, tandis que le remplissage empêche le texte de chevaucher le contenu de la cellule. De plus, définir la propriété overflow de la cellule du tableau parent sur masqué empêche le débordement de contenu en dehors des limites de la cellule.

Considérez le code CSS mis à jour suivant :

td {
    overflow: hidden;
}
td a {
    display: block;
    margin: -10em;
    padding: 10em;
}

Avec ces ajustements, le les liens dans les cellules du tableau s'étireront pour remplir toute la hauteur de la ligne, garantissant ainsi une apparence cohérente pour toutes les cellules, quelle que soit la longueur de leur contenu.

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!