html - una - Usando display: table-cell sin table-row

vertical align td bootstrap

Question

Recientemente noté que es posible usar display: table-cell; en un elemento sin rodearlo con un elemento usando display: table-row;

Ejemplo (trabajando en IE, Chrome, FF, Safari, Opera):

<div style="display: table;">
    <div style="display: table-cell;">
        Text
    </div>
</div>

¿Se considera este estilo malo? ¿Debería la celda de la tabla estar rodeada por una fila de la mesa o no es necesario?

Answer 1

De todo lo que sabes sobre CSS es incorrecto :

Elementos de tabla anónimos

Las tablas CSS cumplen con las reglas normales de diseño de tablas, lo que permite una característica extremadamente poderosa de los diseños de tablas CSS: los elementos de tabla que faltan se crean de forma anónima por el navegador. La especificación CSS2.1 establece:

Es posible que otros idiomas del documento que no sean HTML no contengan todos los elementos en el modelo de tabla CSS 2.1. En estos casos, los elementos "faltantes" se deben asumir para que el modelo de tabla funcione. Cualquier elemento de la tabla generará automáticamente objetos de tabla anónimos necesarios alrededor de sí mismo, que constan de al menos tres objetos anidados correspondientes a un elemento de "tabla" / "tabla en línea", un elemento de "fila de tabla" y un elemento de "celda de tabla" .

Lo que esto significa es que si usamos display: table-cell; sin contener primero la celda en un conjunto de bloques para display: table-row; , la fila estará implícita: el navegador actuará como si la fila declarada estuviera realmente allí.

Entonces no, no hay nada de malo en usar display:table-cell sin contener display:table-row . El CSS que produce es perfectamente válido y tiene algunos casos de uso muy interesantes. Para obtener más información sobre el uso de elementos de la tabla anónima, consulte el artículo que cito.

Nota :

El hecho de que produzca CSS válido no significa que el comportamiento de display:table-cell without display:table-row o display:table-row sea ​​estable. Incluso hoy (febrero de 2016), el comportamiento de elementos de tablas anoymous sigue siendo inconsistente en todos los navegadores. Consulte Comportamiento inconsistente de la pantalla: tabla y pantalla: tabla-celda para obtener más detalles.

Answer 2

No. No es necesario utilizarlo con display: table-row . Lea here .

table-cell solo representa un <td> o <th> :

Especifica que un elemento representa una celda de tabla.

Y específicamente con respecto a la table-cell :

Por ejemplo, una imagen que está configurada para ''mostrar: celda-tabla'' llenará el espacio de celda disponible, y sus dimensiones podrían contribuir a los algoritmos de tamaño de tabla, como en una celda ordinaria.