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

169

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

Ben Johnson
fuente
3
No, creo que ningún navegador lo admite correctamente. No es legal en ningún estándar HTML AFAIK
Pekka
2
@Pekka: HTML no entra, esto es CSS. Y sorprendentemente, funciona. :-)
TJ Crowder
15
Funciona en WebKit e IE hasta donde puedo decir. Firefox parece ser el único al que no le gusta en las celdas de la tabla. Y sí, estoy tratando de colocar elementos dentro del <td> sin tener que depender de flotantes.
Ben Johnson
2
Nuevamente, mira la respuesta de Justin. Funciona bien en Firefox si le dices a Firefox que lo estás tratando como un bloque en lugar de como un elemento de tabla.
TJ Crowder
1
Un jsfiddle que demuestra el problema en esta pregunta: jsfiddle.net/M5P93 Funciona en IE, Safari, Chrome; Firefox falla.
Chris Moschini

Respuestas:

167

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>
DavidJonas
fuente
11
+1 Esta es la única solución que funcionó para mí. Usar tr {display:block}completamente arruina el diseño.
Wesley Murch
+1 Esta es la respuesta para mí también. display: blockno es suficiente una solución en diseños de tabla complejos. El div extra es una solución que es más confiable.
DA.
55
pero, con esta solución, "ancho" y "altura" todavía no se pueden usar
4esn0k
@ 4esn0k ¿Encontraste una solución donde puedes usar ancho y alto?
Neil
9
Desafortunadamente, su solución no funciona si agrega otra columna con más contenido que en la otra. Así que no entiendo la bandera de "respuesta aceptada" y la gran apreciación dada por los votos. Verifique jsfiddle.net/ukR3q
Jan
35

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

display: block;
Justin Niessner
fuente
32
La desventaja de configurar display: block parece ser que realmente puede alterar el formato de la tabla si se aplica directamente al elemento. Porque lo está cambiando de table-cell ... ¿o estoy loco?
Ben Johnson
3
@Ben: Bueno, sí. Establecer positionen una celda de tabla es, por definición, cambiar seriamente el formato de la tabla. Retira el bloque de la celda del flujo (excepto position: relativedonde permanece en el flujo pero se desvía de él).
TJ Crowder
2
@Ben - No, no loco. Definitivamente tendrás que hacer un poco más de trabajo para que las cosas se vean de la manera que deseas. El punto es simplemente que es posible.
Justin Niessner
1
@TJ No está agregando posición: lo relativo está cambiando la apariencia visual, está cambiando el th / td de la celda de la tabla al bloque. Una vez más, es bueno saber que funciona, pero en muchos casos la creación de elementos a nivel de bloque realmente afectará el formato de la tabla. Gracias justin!
Ben Johnson
9
Por desgracia, display: blocktambién puede causar problemas en Firefox, es decir, si la celda de la tabla abarca columnas, al configurarlo para bloquear se colapsará la celda hasta la primera columna.
DA.
13

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

    }

});
mrbinky3000
fuente
$ .browser fue eliminado en jQuery 1.9
Matus
Sí. así que sustitúyalo con su método de detección de navegador favorito.
mrbinky3000
1
El navegador no está defectuoso. La especificación dice que el efecto no está definido.
WGH
44
@WGH no hace que la solución sea menos correcta. Gracias por el voto negativo.
mrbinky3000
1
Hola, acabo de crear un polyfill a partir de tu commit, ¡míralo! :) github.com/Grawl/gecko-table-position-polyfill
Даниил Пронин
11

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

aebabis
fuente
7

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

Ben Johnson
fuente
Ver la respuesta de Justin. Funciona, siempre que cambie la displayconfiguración. Lo que tiene sentido (en la medida en que CSS tiene sentido).
TJ Crowder
8
Sí, "funciona", excepto que aplicarlo a las celdas destruye completamente tu mesa ... Un poco inútil en ese caso.
Simon East
3

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.

Jonathan Dorsey
fuente
1

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.

Simon_Weaver
fuente
0

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>
GrantE
fuente
0

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/

Ben
fuente