css - mac - ¿La posición de soporte de Firefox es relativa en los elementos de la tabla?

inspeccionar elemento teclado

Question

Cuando trato de usar position: relative / position: absolute en un <th> o <td> en Firefox, parece que no funciona.

Answer 1

A partir de Firefox 3.6.13, la posición: relativa / absoluta no parece funcionar en los elementos de la tabla. Parece ser el comportamiento de Firefox desde hace mucho tiempo. Vea lo siguiente: http://csscreator.com/node/31771

El enlace CSS Creator publica la siguiente referencia 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

Answer 2

Agregando display: block al elemento principal funcionó en firefox. También tuve que agregar top: 0px; izquierda: 0px; al elemento padre 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>

Answer 3

Comenzando con Firefox 30, podrás usar la position en los componentes de la mesa. Puede probarlo usted mismo con la compilación nocturna actual (funciona como 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 aquí sobre los cambios (el tema tiene 13 años ): https://bugzilla.mozilla.org/show_bug.cgi?id=63895

A juzgar por el reciente historial de lanzamientos , esto podría estar disponible tan pronto como en mayo de 2014. ¡Apenas puedo contener mi entusiasmo!

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

Answer 4

Como cada navegador web que incluye Internet Explorer 7, 8 y 9 maneja correctamente la posición: relativo en un elemento de visualización de tabla y solo Firefox lo maneja de forma incorrecta, lo mejor es usar un calce de JavaScript. No debería tener que reorganizar su DOM solo para un navegador defectuoso. La gente usa calzas de JavaScript todo el tiempo cuando IE obtiene algo mal y todos los otros 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 anterior de jsfiddle usa técnicas de "Diseño web adaptable" 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 revisa 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();

    }

});

Answer 5

Intenta usar display:inline-block funcionó para mí en Firefox 11, dándome capacidad de posicionamiento dentro del td / th sin destruir el diseño de la mesa. Que junto con la position:relative en un td / th debería hacer que las cosas funcionen. Acabo de hacerlo funcionar yo mismo.

Answer 6

La forma más fácil y adecuada sería envolver el contenido de la celda en una posición div y agregar: en relación con 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>

Answer 7

La solución aceptada funciona, pero no si agrega otra columna con más contenido en ella 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. Así que 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/

Answer 8

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

display: block;

Answer 9

Tenía un elemento de table-cell (que en realidad era un DIV no un 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 anchuras absolutas, por lo que esto funcionará en algunos casos.