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


169

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


3
Non, je pense qu'aucun navigateur ne prend en charge cela correctement. Ce n'est légal dans aucune norme HTML AFAIK
Pekka

2
@Pekka: le HTML n'y entre pas, c'est CSS. Et étonnamment, cela fonctionne. :-)
TJ Crowder

15
Fonctionne dans WebKit et IE pour autant que je sache. Firefox semble être le seul à ne pas l'aimer sur les cellules de tableau. Et oui, j'essaie de positionner des éléments à l'intérieur du <td> sans avoir à compter sur des flotteurs.
Ben Johnson

2
Encore une fois, regardez la réponse de Justin. Cela fonctionne très bien dans Firefox si vous dites à Firefox que vous le traitez comme un bloc plutôt que comme un élément de tableau.
TJ Crowder

1
Un jsfiddle démontrant le problème dans cette question: jsfiddle.net/M5P93 Fonctionne dans IE, Safari, Chrome; Firefox échoue.
Chris Moschini

Réponses:


167

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>

11
+1 C'est la seule solution qui a fonctionné pour moi. L'utilisation tr {display:block}ruine complètement la mise en page.
Wesley Murch

+1 C'est aussi la réponse pour moi. display: blockne suffit pas à corriger les dispositions de table complexes. Le div supplémentaire est une solution plus fiable.
DA.

5
mais, avec cette solution, "largeur" ​​et "hauteur" ne peuvent toujours pas être utilisés
4esn0k

@ 4esn0k avez-vous trouvé une solution où vous pouvez utiliser la largeur et la hauteur?
Neil

9
Malheureusement, votre solution ne fonctionne pas si vous ajoutez une autre colonne avec plus de contenu que dans l'autre. Je ne comprends donc pas le drapeau de «réponse acceptée» et la grande appréciation donnée par les votes. Veuillez vérifier jsfiddle.net/ukR3q
janvier

35

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

display: block;

32
L'inconvénient du réglage display: block semble être qu'il peut vraiment gâcher le formatage du tableau s'il est appliqué directement à l'élément. Parce que ça change de table-cellule ... ou suis-je fou?
Ben Johnson

3
@Ben: Eh bien, oui. La définition positiond'une cellule de tableau modifie sérieusement la mise en forme du tableau. Vous retirez le bloc de la cellule du flux (sauf pour position: relative, où il reste dans le flux mais se décale).
TJ Crowder

2
@Ben - Non, pas fou. Vous devrez certainement faire plus de travail pour que les choses se présentent comme vous le souhaitez. Le fait est simplement que c'est possible.
Justin Niessner

1
@TJ Ce n'est pas l'ajout de position: le relatif qui change l'apparence visuelle, c'est le changement de th / td de table-cellule en bloc. Encore une fois, il est bon de savoir que cela fonctionne, mais dans de nombreux cas, la création d'éléments de niveau bloc va vraiment gâcher le formatage du tableau. Merci Justin!
Ben Johnson

9
hélas, cela display: blockpeut également causer des problèmes dans Firefox - à savoir si la cellule du tableau s'étend sur des colonnes, la définir sur bloquer réduira la cellule jusqu'à la première colonne.
DA.

13

É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();

    }

});

$ .browser a été supprimé dans jQuery 1.9
Matus le

oui. alors remplacez-le par votre méthode de détection de navigateur préférée.
mrbinky3000

1
Le navigateur n'est pas défectueux. La spécification indique que l'effet n'est pas défini.
WGH

4
@WGH Ne rend pas la solution moins bonne. Merci pour le vote défavorable.
mrbinky3000

1
Hey, je viens de créer un polyfill à partir de votre commit, regardez-le! :) github.com/Grawl/gecko-table-position-polyfill
Даниил Пронин

11

À 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


7

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


Voir la réponse de Justin. Cela fonctionne, à condition que vous modifiiez le displayparamètre. Ce qui a du sens (dans la mesure où CSS a du sens).
TJ Crowder

8
Ouais, ça "marche" sauf que l'appliquer aux cellules détruit complètement votre table ... Un peu inutile dans ce cas.
Simon East

3

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.


1

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.


0

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>

0

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/

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.