Utilisation de Position Relative / Absolute dans un TD?

J’ai le code suivant:

 Contents of table cell, variable height, could be more than 60px; 
Notice

Cela ne fonctionne pas du tout. Pour une raison quelconque, la commande position: relative n’est pas lue sur le TD et l’avis DIV est placé en dehors du conteneur de contenu au bas de ma page. J’ai essayé de mettre tout le contenu du TD dans un DIV tel que:

  
Contents of table cell, variable height, could be more than 60px;
Notice

Cependant, cela crée un nouveau problème. Étant donné que la hauteur du contenu de la cellule de tableau est variable, la notice DIV n’est pas toujours au bas de la cellule. Si une cellule de table s’étend au-delà du marqueur 60px, mais qu’aucune des autres cellules ne le fait, alors, dans les autres cellules, l’avis DIV est à 60px vers le bas, au lieu de vers le bas.

En effet, selon CSS 2.1 , l’effet de la position: relative sur les éléments de la table est indéfini. À titre d’illustration, la position: relative a l’effet souhaité sur Chrome 13, mais pas sur Firefox 4. Votre solution ici est d’append une div autour de votre contenu et de mettre la position: relative à ce div au lieu du td . Ce qui suit illustre les résultats que vous obtenez avec la position: relative (1) sur un div bon), (2) sur un td (no good), et enfin (3) sur un div dans un td (good again).

Sur Firefox 4

Pour référence, voici la source HTML .

Cette astuce convient également, mais dans ce cas, les propriétés d’alignement (milieu, bas, etc.) ne fonctionneront pas.

   

En ce qui concerne votre deuxième tentative, avez-vous essayé d’utiliser l’alignement vertical? Non plus

  

ou avec css

 vertical-align:bottom 

Le contenu de la cellule de table, hauteur variable, pourrait être supérieur à 60px;

 
Notice

fonctionne également si vous faites un “display: block;” sur le td, détruisant l’identité td, mais fonctionne!