Utilisation de la position relative / absolue dans un TD?

108

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 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:

<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. Puisque la hauteur du contenu de la cellule du tableau est variable, l'avis 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, alors dans les autres cellules, la notification DIV est à 60px vers le bas, au lieu d'en bas.

html position html-table Jason Axelrod
la source
Y a-t-il une raison d'utiliser le tableau? Je suppose que le reste du contenu de la table va déplacer le contenu de cette cellule. Si le tableau est nécessaire, vous pouvez utiliser deux rangées en haut avec valign = top et en bas avec valign = bottom
Wayne
Si vous utilisez des tableaux à des fins de mise en page, je vous le déconseille. Utiliser des tableaux pour afficher les données est bien, mais ils ne sont pas les meilleurs pour la mise en page.
Kyle
5
C'est pour un calendrier ... donc une grille de table est essentielle: 8wayrun.com/events/monthly/1.2011
Jason Axelrod

Réponses:

189

En effet, selon CSS 2.1 , l'effet de position: relativesur les éléments du tableau n'est pas défini. À titre d'illustration, cela position: relativea l'effet souhaité sur Chrome 13, mais pas sur Firefox 4. Votre solution ici est d'ajouter un divautour de votre contenu et de mettre le position: relativesur celui-ci divau lieu du td. Ce qui suit illustre les résultats que vous obtenez avec le position: relative(1) sur un divbon), (2) sur un td(pas bon), et enfin (3) sur un divintérieur a td(bon encore).

Sur Firefox 4

<table>
  <tr>
    <td>
      <div style="position:relative;">
        <span style="position:absolute; left:150px;">
          Absolute span
        </span>
        Relative div
      </div>
    </td>
  </tr>
</table>
Développer l'extrait

avernet
la source
29
La hauteur div ne sera pas de 100%, donc le positionnement relatif vers le bas: 0 n'a aucun effet.
Softlion
1
Notez que la "portée absolue" dans cet exemple n'affectera pas la hauteur td, ce qui rend l'utilisation de la table inutile.
Dror
@Softlion: Que diriez-vous d'encapsuler tout le contenu de l' tdintérieur a div, défini sur width: 100%et height: 100%, appliquer le remplissage du td au div et le définir sur relative? L'idée est de créer une fine couche contenant juste au-dessus de td, qui agit comme tdelle - même, mais c'est un div. Cela a fonctionné pour moi.
CamilB
1
Le lien vers la source HTML est mort. Pourriez-vous le mettre à jour / l'actualiser?
Peter VARGA
1
Pour ceux qui trouvent cette réponse en 2019 ou plus tard: alors que CSS2.1 disait vraiment que l'effet de position:relativesur les parties internes de la table n'était pas défini, cela signifiait le comportement des parties de la table elles-mêmes (par exemple, on ne savait pas comment les bordures de la table devaient tdse comporter s'il est déplacé via position:relativeen cas de border-collapse:collapse). Cela ne les excluait pas de possibles blocs contenant des descendants absolument positionnés. Le comportement de Firefox s'est donc avéré être juste un bogue, qui a été corrigé en 2014.
Ilya Streltsyn
5

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>
Sergey Onishchenko
la source
2

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

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

Xavier Deva Arul
la source
1

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
Kyle
la source
Cela ne fonctionnerait pas ... si je faisais cela, alors le contenu de la cellule du tableau serait espacé de 60 pixels du bas; au lieu d'en haut.
Jason Axelrod
-2

fonctionne aussi si vous faites un "display: block;" sur le td, détruisant l'identité td, mais ça marche!

daigorocub
la source