Saltar al contenido

CSS: mostrar: bloque; vs pantalla:tabla;

Nuestro equipo de redactores ha pasado horas investigando respuestas a tus preguntas, te dejamos la soluciones y nuestro deseo es que te resulte de mucha apoyo.

Solución:

Comparando los dos (bloque y tabla), no conozco ninguna diferencia central (puede haber algunas menores) que vería en el vacío. Creo que las principales diferencias son específicamente para los niños. Las mesas y sus hijos tienen muy diferentes attributes/relaciones que un div y sus hijos.

En cuanto al bloque en línea y la tabla en línea, consulte: ¿Cuál es la diferencia entre el bloque en línea y la tabla en línea?

Este artículo (http://css-tricks.com/almanac/properties/d/display/) tiene información interesante, específicamente sobre todas las diferentes propiedades de visualización relacionadas con una tabla.

Ambos estarán a nivel de bloque, en el sentido de que no se mostrarán junto a nada más, de manera predeterminada.

Hay una diferencia significativa en la visualización real del elemento. display: block; se extenderá al 100% del espacio disponible, mientras que display: table; sólo será tan amplia como su contenido.

Además, como otros han mencionado, display: table; se requiere para obtener display: table-cell; u otro table- cosas para trabajar en los descendientes.

Solo sé esto porque me encontré con el problema de tratar de obtener el display: table; para llenar el ancho del contenedor. No he podido ver si hay una diferencia en la visualización de display: inline; y display: inline-table;.

https://jsfiddle.net/nnbonhc6/

Estaba investigando esto hoy y encontré que esta sección de la especificación CSS es útil: http://www.w3.org/TR/CSS21/tables.html#model

Notablemente,

la tabla genera un cuadro de bloque principal denominado cuadro contenedor de tabla que contiene el propio cuadro de tabla y los cuadros de título (en el orden del documento). El cuadro de tabla es un cuadro a nivel de bloque que contiene los cuadros de tabla internos de la tabla.

Según tengo entendido, esto significa esencialmente que el navegador genera un bloque contenedor invisible para cualquier cosa con display: table!

Nos puedes añadir valor a nuestro contenido participando con tu experiencia en las explicaciones.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *