Comment CSS3 peut-il développer un DIV pour remplir une cellule de tableau ?

Solution CSS3 pour remplir un DIV dans une cellule de tableau

En développant la question classique de faire en sorte qu'un DIV remplisse une cellule de tableau, nous approfondissons dans le monde de CSS3 pour explorer des solutions contemporaines.

Le Défi

Les solutions traditionnelles, telles que définir la largeur et la hauteur d'un DIV à 100 %, ne fonctionnent plus dans les navigateurs modernes. Nous avons besoin d’une manière plus élégante de nous adapter dynamiquement aux différentes tailles de cellules du tableau.

CSS3 Savior

CSS3 introduit le concept d'"héritage" des propriétés en manipulant intelligemment les propriétés de hauteur des éléments TR (ligne de tableau) et TD (données de tableau). , nous pouvons effectivement forcer un DIV dans un TD à remplir la totalité de cell.

Solution

1. Définissez le TR avec une fausse hauteur, telle que 1px. Cette hauteur est de toute façon ignorée par les navigateurs.
2. Réglez la hauteur du TD sur « hériter », ce qui indique au TD d'adopter la taille de son parent (le TR).
3. Réglez la hauteur du DIV sur "100 %.

Cette technique permet au DIV d'hériter de la hauteur héritée du TD, qui est déterminée dynamiquement par le contenu de la cellule.

Navigateur Compatibilité

Cette solution a été testée et confirmée pour fonctionner à la fois dans IE Edge et Chrome.

Exemple de code

<table>

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!