Comment puis-je faire en sorte qu'un élément DIV remplisse une cellule entière d'un tableau à l'aide du CSS moderne ?

Garantir qu'un DIV s'étend sur une cellule entière d'un tableau avec un CSS moderne

Dans le passé, il était difficile de créer un DIV qui s'intègre de manière transparente remplit une cellule entière du tableau sans connaissance précise des dimensions de la cellule. Avec l'avènement de CSS3, cependant, une solution simple et élégante est apparue.

Pour remplir un DIV dans l'intégralité d'une cellule de tableau, la largeur et la hauteur de la cellule doivent être héritées. Ceci peut être réalisé en définissant la hauteur de la ligne parent (TR) sur une petite valeur arbitraire, telle que « 1px », et en définissant la hauteur de la cellule du tableau (TD) sur « hériter ».

Enfin, le DIV dans la cellule du tableau peut être défini sur « hauteur : 100 % ». Cela garantit que le DIV s'étend sur toute la hauteur et la largeur de la cellule.

Voici un exemple de mise en œuvre de cette solution :

<table>

En suivant cette approche, vous pouvez facilement créer un DIV qui s'étend sur l'intégralité d'une cellule de tableau, quelles que soient ses dimensions inconnues. Cette technique est compatible avec les navigateurs modernes, tels que IE Edge et Chrome, offrant une solution robuste et flexible à un défi CSS persistant.

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!