web-dev-qa-db-fra.com

Utilisation de la position relative / absolue dans un TD?

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 marche 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 une DIV telle que:

<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. Étant donné que la hauteur du contenu de la cellule de la table est variable, la notification DIV n'est pas toujours au bas de la cellule. Si une cellule de tableau s'étend au-delà du marqueur 60px, mais qu'aucune des autres cellules ne le fait, dans les autres cellules, la notification DIV est à 60px, au lieu de se trouver en bas.

htmlpositionhtml-table
105
Jason Axelrod

En effet, selon CSS 2.1 , l’effet de position: relative sur les éléments de la table n’est pas défini. Illustratif de ceci, position: relative a l'effet souhaité sur Chrome 13, mais pas sur Firefox 4. Votre solution est d'ajouter un div autour de votre contenu et de placer le position: relative sur ce div à la place du td. Ce qui suit illustre les résultats obtenus avec le position: relative (1) sur un div bon), (2) sur un td (pas bon), et enfin (3) sur un div à l'intérieur d'un td (bon encore).

On Firefox 4

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

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>
5
Sergey Onishchenko

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
2
Kyle

Le contenu de la cellule de table, hauteur variable, peut dépasser 60 pixels;

<div style="position: absolute; bottom: 0px;">
    Notice
</div>
2
Xavier Deva Arul