display:table-cell y su oportunidad en el Responsive Design

Hace una semana estuve en Freiburg, Alemania asistiendo a la #SmashingConf y la verdad es que aprendí mucho de grandes como Lea Verou, Andy Clarke, Nicole Sullivan, Brad Frost y un gran line up de estrellas en esto del diseño y desarrollo web. Una de las técnicas que me dejó fascinado fue el uso de display:table y su aplicación al Responsive Design o como podemos organizar bloques solo cambiando la propiedad “display” de un elemento. Hasta ahora yo jugaba con el width de los elementos e incluso con position:absolute pero creo que usamos MUY POCO el display:table – incluído yo – pero visto lo que puede optimizar la fuidez de un diseño responsive, prometo utilizarlo en todos los diseños. Empecemos por el principio. display:table no es lo mismo que una tabla, una tabla es:


<table>
</table>

Este es un elemento semántico de HTML donde metemos datos tabulares como una tabla de precios o un reporte financiero, el display:table nos deja organizar como tablas pero sin meterse con la semántica, y por favor no lo utilicemos para mostrar datos tabulares, para eso tenemos las tablas o el display: grid si preferimos una solución en CSS. Contamos con una serie de propiedades para que nuestros elementos se comporten como tablas sin que tengamos que dañar su semántica natural:


div {
display: table;
display: table-cell;
display: table-column;
display: table-colgroup;
display: table-header-group;
display: table-row-group;
display: table-footer-group;
display: table-row;
display: table-caption;
}


Son bastantes explícitos de por sí, display:table nos mostrará el elemento como una tabla (necesario para que los otros elementos anidados se comporten como tal), tenemos display:table-cell que se comporta como una celda y así con el resto. Si quieres puedes ver una descripción de todas ellas.

Veamos un ejemplo:


#wrap {
display : table;
border-collapse : collapse;
width:90%; }

section {
display : table-cell;
width:62%;
border:1px solid #f2e1bf; }

aside {
display : table-cell;
width:38%;
border:1px solid #f2e1bf; }

Ver HTML

Tenemos un body declarado como tabla y dos elementos declarados como celdas, sin necesidad de flotarlos o de declararlos como inline-block. Hasta aquí no es más que otra manera de alinear elementos, cierto?

Pero veamos que puede hacer en nuestro Responsive Design: Anteriormente cuando yo quería que un elemento se fuera a la parte superior, como por ejemplo una barra de navegación lateral pasara a la parte superior, simplemente le daba un width:100%. Eso me obligaba a tener un HTML estructurado concretamente para ello, pero ahora puedo pasarla a la parte superior sin importar el HTML porque al comportarse como tabla puedo asignarle otra propiedad de elemento de tabla: table-header-group.


@media only screen and (max-width: 699px) {

aside {
display : table-header-group; }

section {
display : table-row; }

}

Ver HTML
*Haz esa cosa con el navegador que solo hacemos los geeks de estirarlo y reducirlo de tamaño para ver como va fluyendo el diseño

Magnífico, huh? podemos organizar cambiando las propiedades de tabla de cada elemento sin necesidad de adaptar el HTML para ello. Y por si no os habíais dado cuenta: table-cell muestra los elementos a la misma altura! Nunca habéis sufrido el incordio de columnas de diferente altura gracias a su contenido y lo horrible que era dejarlas todas al mismo tamaño? pues con displa:table-cell las deja todas al mismo alto, siempre basado en la altura de la “celda” con mayor contenido, por ejemplo:


<section>
<article>...</article>
<article>...</article>
<article>...</article>
</section>

Normalmente y con float-left o display:inline-block, estos elementos flotarán uno al lado del otro, pero el alto de cada uno dependerá de su contenido:

Sin embargo con display:table-cell todas las capas o “articles” en este caso, estarán a la misma altura y con el mismo tamaño:

Ver Código

Maravilloso.

Para acabar, lo dicho arriba: deberíamos utilizar más el display:table, su mezcla con mediaqueries es brutal. Cheers!

Daniel Martínez

26 comentarios - ¿Quieres opinar?
  1. Que buen artículo, a usarlo entonces……

  2. Francisco Naranjo

    A practicar, interesante artículo
    RWD cada día ganas más espacio

  3. Muy buen articulo, me parece fascinante como resuelve el tema de las columnas de diferente tamaño.

  4. Hola estimado Wakkos,

    sabes donde puedo encontrar más información sobre este mismo tema ?¿?¿

    un saludo :D

  5. Que tal wakkos y como hago para que automáticamente baje cada 3 cajas, con este código veo que se va en caldo en una sola fila todas las cajas a pesar que le puse un ancho al section.

    saludos

  6. Me gusta tu estilo. Has ganado un seguidor ;)

  7. genial el articulo …muchas gracias

  8. Muy buen artículo :)

  9. Ahhh, voy hacia la luz!! Gracias por compartir sabiduría!

  10. muy buen articulo … gracias por compartir esta información que es muy requerida por nosotros los desarrolladores.

  11. Gracias Wakkos, una vez más, por transmitir tus conocimientos en cursos, hangsout y aquí.
    Saludos!

  12. Buen artículo Wakkos. Ahora a comenzar a utilizar estas propiedades. Gracias!!

  13. Genial!!
    Otra manera de hacer que mejore nuestro diseño responsive gracias a @wakkos.

  14. Me hiciste el dia @wakkos

  15. Tenías razón Wakkos, es buenísimo!! A los floats: Fuera de aquí “so mugrosos”!!

  16. Muchas gracias, llevaba tiempo queriendo saber de qué iba el display:table. Ahora me asalta la duda de siempre.
    ¿qué compatibilidad tiene con el dichoso IE? ¿se puede usar sin reservas?

    muchas gracias y un saludo

  17. Por fin parece haber una solución para todos los problemas que planteaban los divs flotados, y es bastante elegante. Gracias por el artículo.

    Justin, puedes comprobar la compatibilidad de las distintas características de CSS en este sitio:
    http://caniuse.com/css-table

    Saludos.

    P. D.: He empezado a leer rápido y pensaba que habías estado de viaje en “Firebug”. Será que paso demasiadas horas con él, XD.

  18. genial….muchas gracias

  19. muy buen artículo…ahora se el funcionamiento de display:table, ahora ha practicar.

  20. Excelente aportación y cuánta razón.

  21. no useis esto..hay incompatibilidades con los max-with y width 100% para las imagenes, así como incompatibilidad con overflow hiddens de divs que estén dentro de los table-cell. aparece una barra de scroll imposible de quitar.

  22. saludos soy muy nuevo por aca y no se si estoy en el sitio correcto, estaba buscando una forma de scroll para una plantilla que quisiera formar en caso que alguien quiera una web jajja pues me gusta disenar para otros pero muy poco para mi mismo pue sno tengo que anunciar en la web y alaves mucho de lo que e aprendido y creo que es mucho, en fin con respecto al tu tema , una tabal es tabla en html o css segun mis creaciones primero , si voy a crear una tabla con 3 columnas pero la primera columna tiene 300 letras y otra 100 es muy logico que se muestra rodeada por la celda que obedece a 100 y 300 palabras, ell css en si solo sirve para como el nombre lo dice el estilo, que forma parte que si a 100 palabras quiero un fondo rojo y a 300 yuno blanco muestre tales si .tablauno {width:300px; height no necesario pero si 300px y tabla2{width:100px;height:no necesario pero 100 px muestre tal si se que voy a poner 100 pixel maximo de contenido .} todo esta en que bamos a utilizar cada celda pues si la creo la ordeno como quiero si creamos una web y sabemos lo que bamos a poner en su contenido de cada celda div etc. saludos y buena que en mi idioma podamos compartir y ante todo luchar contra las actualizaciones de internet y sus navegadores que cada dia no son mas que pobres queriendo ser ricos modernizando lo que es tan t=natura como mi header

    y muestra izquierda
    y aqui el contendio de nuestra noticias o diari blablabla
    y por supuesto el contenido de esta tabla derecha

    <td class="hey porque no un pie que seria la blase etc" y pnemos su contenid

    esto es a sido y sera una tabla que se debe mostra en cualquier navegador sino que pc estoy comprando? una que muestra lo que ellos quieren? entonces i plata no vale? cuando compre un ordenador? el intrnet esta lleno delo que le llaman capitalismo o quiere y esta invadiendo nuestros ordenadores para que el titulo de webmaster valga mas que la pc que se vende no es actualizacion es dinero llamando dinero saludos y estare por aca.

  23. hola wakkos en el curso que dictastes de mejorandola me parecio brutal ahora leo todos tus pos y espero aprender mucho css con el sigue asi sos un crack.

  24. He probado de hacer una pagina recursiva con esta tecnica, donde un div tiene el display:table y otros dos el display:table-cell. El tema es que si en los divs que tienen el display:table-cell, no se pone texto, sino imagenes (una imagen en cada div), el efecto del recursive no funciona ni el Explorer ni Mozilla (si en Chrome). ¿Alguien sabe por qué? ¿Es error mio o a alguien mas le ha pasado? ¿Alguna solución?

    A ver si alguien me puede responder… Gracias!!

  25. Saludo, gracias por el artículo, tengo una tabla desarrollada en Dreamweaver, de la cual tome el código html y lo incorporé a un blog que tiene diseño responsive, funciona perfecto, pero la tabla la corta, no le funciona el responsive, ¿Qué debo agregarle al código html de la tabla? Por favor respóndeme lo mas pronto que pueda, mi e-mail es: Mil gracias. vanematcursos@hotmail.com

Opiniones y preguntas:

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