html - ejemplo - Usando display: table-cell sin contenido display: table

display table cell css

Question

Intento crear una página web HTML 5 semánticamente correcta utilizando CSS 3. He creado el marcado a continuación que existe en la raíz de mi elemento de body . La aplicación display:table-cell a los elementos aside y section hace que se conviertan en columnas como me gustaría. Sin embargo, no tengo ningún elemento que contenga para aplicar una display:table a. ¿Está bien usar display:table-cell si el elemento al que se está aplicando no está contenido dentro de una display:table ? Si no, ¿hay un mejor mecanismo para crear un diseño de columna con estos elementos sin usar flotantes?

<aside>
    <nav>
       <ul>
           <li><a href="#">Link 1</a></li>
           <li><a href="#">Link 2</a></li>
       </ul>
    </nav>
</aside>
<section>
    Content goes here
</section>

Answer 1

De las especificaciones de CSS2.1 :

17.2.1 Objetos de tabla anónimos

Es posible que los idiomas del documento que no sean HTML no contengan todos los elementos del modelo de tabla CSS 2.1. En estos casos, se deben suponer los elementos "faltantes" para que el modelo de tabla funcione. Cualquier elemento de tabla generará automáticamente objetos de tabla anónimos necesarios alrededor de sí mismo, que consta de al menos tres objetos anidados correspondientes a un elemento ''tabla'' / ''tabla en línea'', un elemento ''tabla-fila'' y un elemento ''tabla-celda'' . Los elementos faltantes generan objetos anonymous (por ejemplo, cuadros anónimos en el diseño de la tabla visual)

...

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

Entonces sí, usando display:table-cell sin contener display:table produce CSS válido. Sin embargo, eso no significa que su comportamiento sea estable. Incluso hoy (febrero de 2016), el comportamiento de la display:table y display:table-cell permanece incoherente en todos los navegadores. Consulte Comportamiento de visualización incoherente: tabla y visualización: tabla-celda para algunos ejemplos.

Answer 2

Si, es valido Lea 17.2.1 de la especificación CSS2 con respecto a los objetos de tabla anónimos. Más específicamente, estas secciones ...

Generando envolturas de niño faltantes:

1. Si un elemento secundario C de una tabla o cuadro de tabla en línea no es un elemento apropiado para la tabla, genere un cuadro anónimo de "tabla de tabla" alrededor de C y todos los hermanos C consecutivos que no son hijos de tabla adecuados.
2. Si un niño C de un cuadro de grupo de filas no es un cuadro de ''tabla-fila'', genere un cuadro ''fila de tablas'' anónimo alrededor de C y todos los hermanos consecutivos de C que no sean cuadros de ''tabla-fila''.
3. Si un niño C de una casilla de ''tabla-tabla'' no es una ''celda de tabla'', entonces genere un cuadro ''celda de tabla'' anónimo alrededor de C y todos los hermanos consecutivos de C que no son cuadros de ''celda de tabla''.

Generar padres desaparecidos:

1. Para cada casilla ''celda-tabla'' C en una secuencia de tabla interna consecutiva y hermanos ''tabla-título'', si el padre de C no es una ''fila de tabla'' entonces genera un cuadro anónimo ''tabla-fila'' alrededor de C y todos consecutivos hermanos de C que son casillas de "celda de tabla".

2. Para cada niño adecuado de la tabla C en una secuencia de niños consecutivos de la tabla adecuada, si C está mal representado, genere una caja anónima ''tabla'' o ''tabla en línea'' T alrededor de C y todos los hermanos consecutivos de C que son hijos adecuados de la tabla. (Si el padre de C es un cuadro "en línea", entonces T debe ser un cuadro de "tabla en línea"; de lo contrario, debe ser un cuadro de "tabla").

   • Una ''tabla-fila'' está mal aparejada si su elemento primario no es ni un cuadro de grupo de filas ni un cuadro de ''tabla'' o ''tabla en línea''.
   • Un cuadro de "columna de tabla" está mal representado si su elemento primario no es un cuadro "tabla-columna-grupo" ni una casilla "tabla" o "tabla en línea".
   • Un cuadro de grupo de filas, un cuadro de ''tabla-columna-grupo'' o un ''cuadro-pie de ilustración'' está mal apareado si su elemento principal no es un cuadro de ''tabla'' ni un cuadro de ''tabla en línea''.