web-dev-qa-db-fra.com

Est-ce que Firefox supporte la position: relative sur les éléments de la table?

Quand j'essaie d'utiliser position: relative/position: absolute sur un <th> ou <td> dans Firefox cela ne semble pas fonctionner.

cssfirefox
169
Ben Johnson

Le moyen le plus simple et le plus approprié serait d’envelopper le contenu de la cellule dans un div et d’ajouter position: par rapport à celui-ci.

exemple:

<td>
  <div style="position:relative">
      This will be positioned normally
      <div style="position:absolute; top:5px; left:5px;">
           This will be positioned at 5,5 relative to the cell
      </div>
  </div>
</td>
168
DavidJonas

Cela ne devrait pas poser de problème. N'oubliez pas de définir également:

display: block;
34
Justin Niessner

Étant donné que tous les navigateurs Web, y compris Internet Explorer 7, 8 et 9, gèrent correctement la position: relative sur un élément d’affichage table et que seul FireFox le gère de manière incorrecte, le mieux est d’utiliser une cale JavaScript. Vous ne devriez pas avoir à réorganiser votre DOM pour juste un navigateur défectueux. Les gens utilisent javascript JavaScript tout le temps quand IE obtient quelque chose de mal et tous les autres navigateurs le font correctement.

Voici un jsfiddle complètement annoté avec tout le HTML, CSS et JavaScript expliqué.

http://jsfiddle.net/mrbinky3000/MfWuV/33/

Mon exemple de jsfiddle ci-dessus utilise des techniques de "conception Web réactive" pour montrer simplement que cela fonctionnera avec une présentation réactive. Cependant, votre code n'a pas besoin d'être réactif.

Voici le JavaScript ci-dessous, mais cela n’aura pas beaucoup de sens hors contexte. S'il vous plaît consulter le lien jsfiddle ci-dessus.

$(function() {
    // FireFox Shim
    // FireFox is the *only* browser that doesn't support position:relative for
    // block elements with display set to "table-cell." Use javascript to add
    // an inner div to that block and set the width and height via script.
    if ($.browser.mozilla) {

        // wrap the insides of the "table cell"            
        $('#test').wrapInner('<div class="ffpad"></div>');

        function ffpad() {
            var $ffpad = $('.ffpad'),
                $parent = $('.ffpad').parent(),
                w, h;

            // remove any height that we gave ffpad so the browser can adjust size naturally.
            $ffpad.height(0);

            // Only do stuff if the immediate parent has a display of "table-cell".  We do this to
            // play nicely with responsive design.
            if ($parent.css('display') == 'table-cell') {               

                // include any padding, border, margin of the parent
                h = $parent.outerHeight();

                // set the height of our ffpad div
                $ffpad.height(h);

            }

        }


        // be Nice to fluid / responsive designs   
        $(window).on('resize', function() {
            ffpad();
        });

        // called only on first page load
        ffpad();

    }

});
13
mrbinky3000

À partir de Firefox 30, vous pourrez utiliser position sur les composants de la table. Vous pouvez essayer par vous-même avec la version nocturne actuelle (fonctionne en mode autonome): http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/latest-trunk/

Cas de test ( http://jsfiddle.net/acbabis/hpWZk/ ):

<table>
    <tbody>
        <tr>
            <td style="width: 100px; height: 100px; background-color: red; position: relative">
                <div style="width: 10px; height: 10px; background-color: green; position: absolute; top: 10px; right: 10px"></div>
            </td>
        </tr>
    </tbody>
<table>

Vous pouvez continuer à suivre la discussion des développeurs sur les modifications ici (le sujet est 13 ans ancien): https://bugzilla.mozilla.org/show_bug.cgi?id = 63895

À en juger par historique des versions récentes , ceci pourrait être disponible dès le mois de mai 2014. Je peux à peine contenir mon enthousiasme!

EDIT (06/10/14): Firefox 30 est sorti aujourd'hui. Bientôt, le positionnement de la table ne sera plus un problème dans les principaux navigateurs de bureau

10
acbabis

Depuis Firefox 3.6.13, la position: relatif/absolu ne semble pas fonctionner sur les éléments de la table. Cela semble être un comportement de longue date de Firefox. Voir ce qui suit: http://csscreator.com/node/31771

Le lien CSS Creator affiche la référence suivante du W3C:

L'effet de 'position: relative' sur les éléments groupe-ligne-table, groupe-en-tête de table, groupe-pied-de-table, ligne-table, groupe-colonne-table, colonne-table, cellule-cellule et légende de table est indéfini. http://www.w3.org/TR/CSS21/visuren.html#positioning-scheme

7
Ben Johnson

Essayez d'utiliser display:inline-block cela a fonctionné pour moi dans Firefox 11, me permettant de positionner dans le td/th sans détruire la mise en page du tableau. Cela conjointement avec position:relative sur un td/th devrait faire fonctionner les choses. Je viens de le faire fonctionner moi-même.

3
Jonathan Dorsey

J'ai eu un table-cell élément (qui était en fait un DIV pas un TD)

J'ai remplacé

display: table-cell;
position: relative;
left: .5em

(qui a fonctionné dans Chrome) avec

display: table-cell;
padding-left: .5em

Bien sûr, le remplissage est généralement ajouté à la largeur dans le modèle de boîte - mais les tableaux semblent toujours avoir leur propre esprit quand il s'agit de largeurs absolues - donc cela fonctionnera dans certains cas.

1
Simon_Weaver

Le type de solution accepté fonctionne, mais pas si vous ajoutez une autre colonne avec plus de contenu que celle-ci. Si vous ajoutez height:100% à votre tr , td & div alors cela devrait fonctionner.

<tr style="height:100%">
  <td style="height:100%">
    <div style="position:relative; height:100%">
        This will be positioned normally
        <div style="position:absolute; top:5px; left:5px;">
             This will be positioned at 5,5 relative to the cell
        </div>
    </div>
  </td>
</tr>

Le seul problème est que cela ne résout que le problème de hauteur de colonne dans FF, pas dans Chrome et IE. C'est donc un pas de plus, mais pas parfait.

J'ai mis à jour un violon de Jan qui ne fonctionnait pas avec la réponse acceptée pour montrer que cela fonctionnait. http://jsfiddle.net/gvcLoz20/

0
Ben

L'ajout de display: block à l'élément parent a fonctionné dans Firefox. J'ai également dû ajouter top: 0px; gauche: 0px; à l'élément parent pour Chrome fonctionner. IE7, IE8 et IE9 fonctionnent également.

<td style="position:relative; top:0px; left:0px; display:block;">
    <table>        
        // A table of information here. 
        // Next line is the child element I want to overlay on top of this table
    <tr><td style="position:absolute; top:5px; left:100px;">
        //child element info
    </td></tr>
   </table>
</td>
0
GrantE