Firefox supporta la posizione: relativa sugli elementi della tabella?

Quando provo a usare position: relative/ position: absolutesu un <th>o <td>in Firefox non sembra funzionare.

Il modo più semplice e corretto sarebbe avvolgere il contenuto della cella in un div e aggiungere una posizione: relativa a quel div.

esempio:

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

Questo non dovrebbe essere un problema. Ricorda di impostare anche:

display: block;

Poiché ogni browser Web, incluso Internet Explorer 7, 8 e 9, gestisce correttamente la posizione: relativo su un elemento di visualizzazione tabella e solo FireFox lo gestisce in modo errato, la soluzione migliore è utilizzare uno shim JavaScript. Non dovresti riorganizzare il tuo DOM solo per un browser difettoso. Le persone usano JavaScript shim sempre quando IE sbaglia qualcosa e tutti gli altri browser lo fanno bene.

Ecco un jsfiddle completamente annotato con tutti gli HTML, CSS e JavaScript spiegati.

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

Il mio esempio jsfiddle sopra usa le tecniche di "Responsive Web Design" solo per mostrare che funzionerà con un layout reattivo. Tuttavia, il tuo codice non deve essere reattivo.

Ecco il JavaScript qui sotto, ma non avrà molto senso fuori dal contesto. Controlla il link jsfiddle sopra.

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

    }

});

A partire da Firefox 30, potrai utilizzare positioni componenti della tabella. Puoi provare tu stesso con l'attuale build notturna (funziona come indipendente): http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/latest-trunk/

Test case ( 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>

Puoi continuare a seguire la discussione degli sviluppatori sulle modifiche qui (l'argomento ha 13 anni ): https://bugzilla.mozilla.org/show_bug.cgi?id=63895

A giudicare dalla recente cronologia delle versioni, questo potrebbe essere disponibile a partire da maggio 2014. Riesco a malapena a contenere la mia eccitazione!

EDIT (6/10/14): Firefox 30 è stato rilasciato oggi. Presto, il posizionamento della tabella non sarà più un problema nei principali browser desktop

A partire da Firefox 3.6.13, posizione: relativo / assoluto non sembra funzionare sugli elementi della tabella. Questo sembra essere un comportamento di Firefox di vecchia data. Vedere quanto segue: http://csscreator.com/node/31771

Il link CSS Creator pubblica il seguente riferimento W3C:

L'effetto di 'position: relative' sugli elementi table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell e table-caption non è definito. http://www.w3.org/TR/CSS21/visuren.html#positioning-scheme

Prova a usarlo display:inline-blockha funzionato per me in Firefox 11 dandomi la capacità di posizionamento entro il td / th senza distruggere il layout della tabella. Che in congiunzione con position:relativeun giorno o l'altro dovrebbe far funzionare le cose. Ho appena funzionato da solo.

Ho avuto un table-cellelemento (che in realtà era un DIVnon a TD)

Ho sostituito

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

(che ha funzionato in Chrome) con

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

Ovviamente l'imbottitura di solito viene aggiunta alla larghezza nel modello a scatola - ma le tabelle sembrano sempre avere una propria mente quando si tratta di larghezze assolute - quindi questo funzionerà in alcuni casi.

Aggiunta di display: il blocco all'elemento genitore ha funzionato in Firefox Ho anche dovuto aggiungere top: 0px; a sinistra: 0px; all'elemento genitore affinché Chrome funzioni. Anche IE7, IE8 e IE9 funzionano.

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

Il tipo di soluzione accettata funziona, ma non se aggiungi un'altra colonna con più contenuti rispetto a quella dell'altra. Se aggiungi height:100%a tr , td e div, dovrebbe funzionare.

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

L'unico problema è che questo risolve solo il problema dell'altezza della colonna in FF, non in Chrome e IE. Quindi è un passo avanti, ma non perfetto.

Ho aggiornato un violino di Jan che non funzionava con la risposta accettata per dimostrarlo funzionante. http://jsfiddle.net/gvcLoz20/