¿Firefox admite position: relative en los elementos de la tabla?

Cuando intento usar position: relative/ position: absoluteen a <th>o <td>en Firefox, parece que no funciona.

La forma más fácil y más adecuada sería envolver el contenido de la celda en un div y agregar una posición: relativa a ese div.

ejemplo:

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

No debería ser problema. Recuerde configurar también:

display: block;

Dado que todos los navegadores web, incluidos Internet Explorer 7, 8 y 9 manejan correctamente la posición: relativa en un elemento de visualización de tabla y solo FireFox maneja esto incorrectamente, su mejor opción es usar una cuña de JavaScript. No debería tener que reorganizar su DOM solo por un navegador defectuoso. La gente usa calzas de JavaScript todo el tiempo cuando IE se equivoca y todos los demás navegadores lo hacen bien.

Aquí hay un jsfiddle completamente anotado con todo el HTML, CSS y JavaScript explicados.

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

Mi ejemplo jsfiddle anterior utiliza técnicas de "diseño web receptivo" solo para mostrar que funcionará con un diseño receptivo. Sin embargo, su código no tiene que ser receptivo.

Aquí está el JavaScript a continuación, pero no tendrá mucho sentido fuera de contexto. Por favor revise el enlace jsfiddle arriba.

$(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 de Firefox 30, podrás usarlo positionen los componentes de la tabla. Puede probarlo usted mismo con la compilación nocturna actual (funciona de manera independiente): http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/latest-trunk/

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

Puede seguir la discusión de los desarrolladores sobre los cambios aquí (el tema tiene 13 años ): https://bugzilla.mozilla.org/show_bug.cgi?id=63895

A juzgar por el historial de lanzamientos recientes , esto podría estar disponible a partir de mayo de 2014. ¡Apenas puedo contener mi emoción!

EDITAR (10/06/14): Firefox 30 fue lanzado hoy. Pronto, el posicionamiento de la mesa no será un problema en los principales navegadores de escritorio

A partir de Firefox 3.6.13, posición: relativa / absoluta no parece funcionar en los elementos de la tabla. Esto parece ser un comportamiento de larga data de Firefox. Consulte lo siguiente: http://csscreator.com/node/31771

El enlace CSS Creator publica la siguiente referencia del W3C:

El efecto de 'position: relative' en los elementos table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell y table-caption. es indefinido. http://www.w3.org/TR/CSS21/visuren.html#positioning-scheme

Intentar usarlo display:inline-blockfuncionó para mí en Firefox 11 dándome la capacidad de posicionamiento dentro del td / th sin destruir el diseño de la tabla. Eso junto con position:relativeun td / th debería hacer que las cosas funcionen. Lo tengo funcionando yo mismo.

Tenía un table-cellelemento (que en realidad DIVno era un a TD)

Reemplacé

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

(que funcionó en Chrome) con

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

Por supuesto, el relleno generalmente se agrega al ancho en el modelo de caja, pero las tablas siempre parecen tener una mente propia cuando se trata de anchos absolutos, por lo que esto funcionará en algunos casos.

Agregar display: block al elemento padre hizo que esto funcionara en firefox. También tuve que agregar top: 0px; izquierda: 0px; al elemento principal para que Chrome funcione. IE7, IE8 e IE9 también funcionan.

<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 solución aceptada funciona, pero no si agrega otra columna con más contenido que en la otra. Si agrega height:100%a su tr , td y div, entonces debería 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>

El único problema es que esto solo soluciona el problema de altura de columna en FF, no en Chrome e IE. Entonces está un paso más cerca, pero no es perfecto.

Actualicé un violín de Jan que no funcionaba con la respuesta aceptada para mostrar que funcionaba. http://jsfiddle.net/gvcLoz20/