Utilisation de la position relative/absolue dans un TD ?

Question

J'ai le code suivant :

<td style="position: relative; min-height: 60px; vertical-align: top;">
    Contents of table cell, variable height, could be more than 60px;

    <div style="position: absolute; bottom: 0px;">
        Notice
    </div>
</td>

Cela ne fonctionne pas du tout. Pour une raison quelconque, la commande position:relative n'est pas lue dans le TD et le DIV de notification est placé en dehors du conteneur de contenu en bas de ma page. J'ai essayé de placer tout le contenu du TD dans un DIV, par exemple :

<td>
    <div style="position: relative; min-height: 60px; vertical-align: top;">
        Contents of table cell, variable height, could be more than 60px;

        <div style="position: absolute; bottom: 0px;">
            Notice
        </div>
    </div>
</td>

Cependant, cela crée un nouveau problème. Comme la hauteur du contenu de la cellule de tableau est variable, le DIV de notification n'est pas toujours au bas de la cellule. Si une cellule de tableau s'étend au-delà du repère de 60px, mais qu'aucune des autres cellules ne le fait, alors dans les autres cellules, le DIV de notification se trouve à 60px vers le bas, au lieu d'être en bas.

Answer 1

En effet, selon CSS 2.1 l'effet de position: relative sur les éléments de la table n'est pas définie. En voici un exemple, position: relative a l'effet désiré sur Chrome 13, mais pas sur Firefox 4. Votre solution ici est d'ajouter un div autour de votre contenu et mettre les position: relative sur ce point div au lieu de la td . L'exemple suivant illustre les résultats obtenus avec l'option position: relative (1) sur un div bon), (2) sur un td (pas bon), et enfin (3) sur une div à l'intérieur d'un td (encore bon).

<table>
  <tr>
    <td>
      <div style="position:relative;">
        <span style="position:absolute; left:150px;">
          Absolute span
        </span>
        Relative div
      </div>
    </td>
  </tr>
</table>

Answer 2

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

<td style="display: block; position: relative;">
</td>

Answer 3

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

<div style="position: absolute; bottom: 0px;">
    Notice
</div>

Answer 4

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

<td valign="bottom">

ou avec css

vertical-align:bottom

Answer 5

Fonctionne également si vous faites un "display : block ;" sur le td, détruisant l'identité du td, mais fonctionne !