O Firefox suporta a posição: relativa em elementos da tabela?

Quando tento usar position: relative/ position: absoluteno <th>ou <td>no Firefox, isso não parece funcionar.

A maneira mais fácil e adequada seria envolver o conteúdo da célula em uma div e adicionar uma posição: relativa a essa div.

exemplo:

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

Isso não deve ser problema. Lembre-se de definir também:

display: block;

Como todo navegador da Web, incluindo o Internet Explorer 7, 8 e 9, lida corretamente com a posição: em um elemento de exibição de tabela e apenas o FireFox lida com isso incorretamente, sua melhor aposta é usar um calço JavaScript. Você não precisa reorganizar seu DOM apenas por um navegador com defeito. As pessoas usam calços JavaScript o tempo todo quando o IE comete algo errado e todos os outros navegadores fazem o certo.

Aqui está um jsfiddle completamente anotado com todo o HTML, CSS e JavaScript explicados.

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

Meu exemplo do jsfiddle acima usa técnicas de "Responsive Web Design" apenas para mostrar que ele funcionará com um layout responsivo. No entanto, seu código não precisa ser responsivo.

Aqui está o JavaScript abaixo, mas não fará muito sentido fora do contexto. Por favor, verifique o link jsfiddle acima.

$(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 partir do Firefox 30, você poderá usar os positioncomponentes da tabela. Você pode tentar por si mesmo com a compilação noturna atual (funciona como independente): http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/latest-trunk/

Caso de teste ( 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>

Você pode continuar acompanhando a discussão dos desenvolvedores sobre as alterações aqui (o tópico tem 13 anos ): https://bugzilla.mozilla.org/show_bug.cgi?id=63895

A julgar pelo histórico recente de lançamentos , isso pode estar disponível a partir de maio de 2014. Mal posso conter minha emoção!

EDIT (10/06/14): O Firefox 30 foi lançado hoje. Em breve, o posicionamento da tabela não será um problema nos principais navegadores de desktop

No Firefox 3.6.13, a posição: relativo / absoluto não parece funcionar nos elementos da tabela. Este parece ser o comportamento do Firefox de longa data. Veja o seguinte: http://csscreator.com/node/31771

O link do CSS Creator publica a seguinte referência W3C:

O efeito de 'posição: relativo' nos elementos de grupo de linhas da tabela, grupo de cabeçalho da tabela, grupo de rodapé da tabela, linha de tabela, grupo de colunas da tabela, coluna da tabela, célula da tabela e legenda da tabela está indefinido. http://www.w3.org/TR/CSS21/visuren.html#positioning-scheme

Tente usá- display:inline-blocklo funcionou para mim no Firefox 11, fornecendo-me capacidade de posicionamento dentro do td / th sem destruir o layout da tabela. Isso, em conjunto com position:relativeum td / th, deve fazer as coisas funcionarem. Só tenho que trabalhar.

Eu tinha um table-cellelemento (que na verdade DIVnão era um TD)

Eu troquei

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

(que funcionou no Chrome) com

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

É claro que o preenchimento geralmente é adicionado à largura no modelo de caixa - mas as tabelas sempre parecem ter uma mente própria quando se trata de larguras absolutas -, portanto, isso funcionará em alguns casos.

Adicionando display: block ao elemento pai, isso funcionou no firefox. Eu também tive que adicionar top: 0px; esquerda: 0px; ao elemento pai para o Chrome funcionar. IE7, IE8 e IE9 também estão funcionando.

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

A solução aceita meio que funciona, mas não se você adicionar outra coluna com mais conteúdo do que na outra. Se você adicionar height:100%ao seu tr , td & div, ele deverá funcionar.

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

O único problema é que isso corrige apenas o problema de altura da coluna no FF, não no Chrome e no IE. Portanto, é um passo mais perto, mas não é perfeito.

Atualizei um violino de Jan que não estava funcionando com a resposta aceita para mostrar que estava funcionando. http://jsfiddle.net/gvcLoz20/