Firefox prend-il en charge la position: relative sur les éléments du tableau?

Lorsque j'essaye d'utiliser position: relative/ position: absolutesur un <th>ou <td>dans Firefox, cela ne semble pas fonctionner.

Le moyen le plus simple et le plus approprié serait d'envelopper le contenu de la cellule dans un div et d'ajouter une position: par rapport à ce div.

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>

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

display: block;

Étant donné que chaque navigateur Web, y compris Internet Explorer 7, 8 et 9, gère correctement la position: relative sur un élément d'affichage de table et que seul FireFox gère cela de manière incorrecte, le mieux est d'utiliser un shim JavaScript. Vous ne devriez pas avoir à réorganiser votre DOM uniquement pour un navigateur défectueux. Les gens utilisent des shims JavaScript tout le temps lorsque IE se trompe et que 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 jsfiddle ci-dessus utilise des techniques de "Responsive Web Design" juste pour montrer qu'il fonctionnera avec une mise en page responsive. 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. Veuillez 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();

    }

});

À partir de Firefox 30, vous pourrez utiliser positiondes composants de table. Vous pouvez essayer par vous-même avec la version nocturne actuelle (fonctionne de manière 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 changements ici (le sujet a 13 ans ): https://bugzilla.mozilla.org/show_bug.cgi?id=63895

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

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

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

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

L'effet de 'position: relative' sur les éléments table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell et table-caption n'est pas défini. http://www.w3.org/TR/CSS21/visuren.html#positioning-scheme

Essayer de l'utiliser display:inline-blocka fonctionné pour moi dans Firefox 11 en me donnant la capacité de positionnement dans le td / th sans détruire la mise en page du tableau. Cela en conjonction avec position:relativeun td / th devrait faire fonctionner les choses. Je viens de le faire fonctionner moi-même.

J'avais un table-cellélément (qui n'était en fait DIVpas un TD)

j'ai remplacé

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

(qui fonctionnait dans Chrome) avec

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

Bien sûr, le rembourrage est généralement ajouté à la largeur dans le modèle de boîte - mais les tables semblent toujours avoir leur propre esprit en ce qui concerne les largeurs absolues - donc cela fonctionnera dans certains cas.

L'ajout d'affichage: bloc à l'élément parent a permis de le faire fonctionner dans Firefox. J'ai également dû ajouter top: 0px; gauche: 0px; à l'élément parent pour que Chrome fonctionne. 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>

La solution acceptée fonctionne, mais pas si vous ajoutez une autre colonne avec plus de contenu que dans l'autre. Si vous ajoutez height:100%à votre tr , td et div, 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 janvier qui ne fonctionnait pas avec la réponse acceptée pour montrer qu'il fonctionnait. http://jsfiddle.net/gvcLoz20/