Tengo una tabla como esta:

<table cellspacing="0">
    <tr>
        <td>Row 1</td>
        <td><button>Button 1</button></td>
    </tr>
    <tr>
        <td>Row 2</td>
        <td><button>Button 2</button></td>
    </tr>
    <tr>
        <td>Row 3</td>
        <td><button>Button 3</button></td>
    </tr>
</table>

Quería absolutamente que la posición de cada botón en la parte superior derecha de la fila de la tabla, así que he usado este CSS, esperando el <tr> para contener el <button>:

tr {
    position:relative;
}
button {
   position:absolute;
   top:0;
   right:0;   
}

Sin embargo, los botones están todos apilados en la parte superior de uno al otro en el mismo lugar. Normalmente funciona bien el uso de <div>s, excepto que se comportan de esta manera, cuando el uso de display:table-row que me enteré durante la prueba, y fue una sorpresa para mí.

Demo: http://jsfiddle.net/QU2zT/1/

Nota: Mi etiqueta real es más complejo, y el elemento que estoy tratando de posición puede aparecer en cualquier lugar en cualquier celda de la tabla en la fila, que es por eso que creo que necesito position:absolute.

  1. ¿Por qué sucede esto?
  2. ¿Cómo puedo evitar esto mediante el uso de CSS, sin alterar el margen de utilidad?

EDITAR: Los resultados son diferentes en Firefox que en Chrome y IE9 (no he probado más allá de eso). FF es un completo fracaso, mientras que los otros navegadores no sólo para contener los «divs con la tabla de la pantalla» programa de instalación, que se ve en la demo.

A mi me funciona en Chrome, que navegador estás usando?
El uso de FF8 el problema es el peor de los casos, pero en otros navegadores parecen tener problemas con la <div> la instalación mediante los diversos display configuración que emulan las tablas (segundo ejemplo en la demo), consulte editar.
Verificar de este MODO la pregunta. Básicamente, la adición de display:block; a la celda o fila que hacer el truco, pero se mete el conjunto de estilos de tabla. Usted podría tratar de la incorporación de un elemento dentro de la célula y dándole posición relativa. Más marcado, menos dolor de cabeza 😛
stackoverflow.com/questions/7629326/…
El contenedor truco no parece funcionar bien en cualquier navegador: jsfiddle.net/QU2zT/18

OriginalEl autor Wesley Murch | 2011-12-14

4 Comentarios

  1. 16

    A la cita de la spec:

    El efecto de la «posición relativa» en la table-row-group, de tabla en el encabezado de grupo, table-footer-group, tabla de filas de la tabla-columna-grupo, de tabla, columna, tabla de células, y la tabla de la leyenda de los elementos es indefinido.

    EDICIÓN:

    La única solución que puedo ver implica el uso de :last-child (es decir. no IE < 9) y bueno viejo vertical-align y text-align:

    td:last-child {
        vertical-align: top;
        text-align: right;
        padding: 0;
        margin: 0;
    }

    Aquí una demo: http://jsfiddle.net/QU2zT/15/

    También me gustaría añadir que si se realmente no desea cambiar el formato y la necesidad de apoyar es decir, usted puede utilizar esta solución combinada con JavaScript.

    PS: no he visto (y no comentar) la solución con divs como veo que no hay punto en la escritura que mucho de marcado para obtener un table, cuando ya hay uno. Sólo será una pesadilla de mantenimiento.

    +1 para el enlace a la especificación, que interesante – el comportamiento indefinido. En el demo de hecho, me han table, tr, td {position:relative;} y ni siquiera la table se contienen (agregar relleno a cuerpo aviso). Se puede hacer un trabajo de demostración o tiene otra solución?
    Todavía es un misterio acerca de la <div> elementos con display:table-* mostrando este problema, aunque no lo es? ¿O es que esta parte de la especificación que en realidad son?
    He actualizado mi respuesta con (algo de) una solución. Como ya he dicho no he mirado el div aplicación, pero si se utiliza display: table-*, todas las reglas se aplican como normal tablas (pero puede haber algunas peculiaridades – por eso no me gusta ir a esta ruta).
    La solución que has publicado todavía se basa en el marcado y el elemento de colocación que no va a volar para mí, por desgracia (lo que significa un montón de trabajo de edición de los archivos de plantilla…): jsfiddle.net/QU2zT/24 El div cosa fue solo un experimento, pero los resultados fueron inesperados, así que lo incluye. Creo que voy a tener que hacer algunas concesiones, gracias de nuevo.
    Sí, pero usted debe tener mencionado en tu pregunta 🙂 Mi respuesta no cambia de marcado (como usted lo solicitó), pero yo no sabía que usted tiene cualquier otro contenido en la celda… en Cuanto elemento de la colocación, esto podría haber sido resuelto con Javascript.

    OriginalEl autor deviousdodo

  2. 9

    Al parecer, la única puro CSS solución es establecer display:block en el tr (incluyendo implícitamente a través del uso de float). Sin embargo, esta gravemente rompe con los diseños de tabla y no funcionó muy bien para mí.

    Me decidí a morder la bala y envolver el contenido de la celda en un div, como se sugiere en estas respuestas:

    <tr>
        <td>
            <div style="position:relative">
                <button style="position:absolute"></button>
            </div>
        </td>
    </tr>

    Esto todavía tiene un inconveniente: desde nuestro position:relative elemento debe estar dentro de una celda de la tabla, sólo funciona en la última celda de la fila de la tabla (cuando el objetivo es tener la absoluta elemento que se sitúa en relación a toda la fila, en la esquina superior derecha). Este también parece no coloque el elemento correctamente como se ve aquí: http://jsfiddle.net/QU2zT/25/

    Esto parece ser lo mejor que podemos hacer, sin abandonar la mesa de marcado o rompiendo con el de representación.

    OriginalEl autor Wesley Murch

  3. 3

    El uso de este hack como la posición relativa de la que se ignora en la tr gracias a https://github.com/w3c/csswg-drafts/issues/1899

    tr{
        transform: scale(1);
    }
    td{
       position:absolute;
       top:0;
       right:0
    }
    Esto no funciona en MS Borde por desgracia.
    sí verdad es un hack por lo que puede comportarse de manera diferente en los distintos navegador

    OriginalEl autor Bharat Parmar

  4. 2

    http://jsfiddle.net/QU2zT/23/

    table, tr, td{
        width: 100%;
    }
    tr {
     background:#cde;
     float: left;
     clear: both;
    }
    Gracias por la idea, que parecía ayudar a los FF, pero como scumah se menciona en los comentarios – se mete hasta la forma en que las filas de la pantalla. Ver la diferencia en bloquear VS table-row
    He actualizado la respuesta.
    Aún los mismos efectos secundarios, incluso después de la adición de width:100%;. Esta realidad es lo que he intentado en principio, pero en realidad se rompió el diseño no tener las celdas de la tabla ocupar todo el ancho de fila. +1, debido a que esta técnica parece funcionar, pero no creo que realmente podría utilizar este método.
    Actualizado de nuevo.
    Wow que raro, parece que funciona. Voy a tener que comprobar esto en la mañana y ver qué tipo de problemas td {width:100%} está causando, no estoy de gas para la noche (aquí las 5 de la mañana). Gracias de nuevo.

    OriginalEl autor Joonas

Dejar respuesta

Please enter your comment!
Please enter your name here