Comment puis-je faire en sorte qu'un élément DIV remplisse toute la largeur et la hauteur d'une cellule de tableau à l'aide de CSS ?

Obtenir des DIV pleine largeur et hauteur dans les cellules de tableau avec CSS

Cette question reste sans réponse depuis des années. Cependant, avec CSS3, nous pouvons revisiter le défi et explorer comment étendre un DIV pour remplir toute la largeur et la hauteur d'une cellule de tableau.

Le nœud du problème réside dans la nature dynamique des dimensions de la cellule et la réactivité limitée des valeurs de 100%. Pour surmonter ce problème, la solution implique une astuce astucieuse.

Tout d'abord, attribuez une hauteur non nulle (par exemple, 1px) à la ligne du tableau. Cette astuce déclenche la reconnaissance par le navigateur de la hauteur de ligne, permettant un contrôle ultérieur.

Ensuite, définissez la hauteur DIV à 100 %, qui devient désormais relative à la hauteur de ligne établie. Cela garantit que le DIV s'étend dynamiquement pour remplir la cellule verticalement.

Pour correspondre à la largeur du DIV, la largeur de la cellule peut être explicitement spécifiée à l'aide de CSS ou automatiquement dimensionnée en fonction de son contenu.

Application de ces éléments Rules garantit que le DIV remplit toutes les dimensions de la cellule du tableau, quelles que soient leurs valeurs initiales ou dynamiques.

Voici un exemple CSS extrait :

table {
  width: 200px;
}

tr {
  height: 1px;
}

td {
  height: inherit;
}

div {
  height: 100%;
}

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!