Responsive Design VI: tablas que se adaptan


diseño

En este post veremos como podemos hacer que nuestras tablas en HTML5 sean responsivas; por lo general las tablas suelen adaptarse de forma natural al ancho de la pantalla, pero esto es hasta un cierto limite que es impuesto por el contenido de la misma, situación que en tablas muy anchas no nos favorece, ya que la persona que nos visita desde un móvil se vera forzado a rotar la pantalla para poder verla, así que veamos como corregir este problema.

El diseño que presentamos a continuación esta basado en la publicación de Chris Coyier  para css-trick.com

Para comenzar debemos ver que lo que deseamos es pasar de una tabla normal, como la siguiente:

 

tabla normal

 

 

A una tabla donde la información se despliegue de forma vertical, como la siguiente:

tabla responsive

 

Para comenzar, crearemos una tabla con HTML5, que como sabemos hace uso de las etiquetas thead y tbody para dividir al tabla en dos secciones, tal y como vemos en el siguiente código:

tabla html

 

Como podemos observar, no hay nada nuevo en el código HTML, todo ocurre en el siguiente CSS

css tabla responsiva

 

Las primera dos reglas CSS que tenemos en la imagen, definen el aspecto normal de la tabla, podemos observar que nuestro media query se ejecutara cuando la pantalla tenga un ancho máximo de 720 pixeles y es en este media query donde introducimos cosas nuevas, por lo que comenzaremos a analizar cada una de las reglas de este media query.

1er regla.

Como podemos ver, esta regla se aplica a todas las etiquetas que componen la tabla (table,thead, tbody, th, tr,td) y usamos la propiedad display para que la tabla deje de presentarse como tal y tome la forma de bloque, que es una modalidad en donde el contenido es tratado como si fuera un párrafo.

2da regla.

Con esta regla que aplicamos al encabezado de la tabla, movemos dicho encabezado a una posición absoluta que esta fuera de la pantalla, con lo que queda oculta. Esto es útil para quedarnos solo con el contenido de la tabla.

3ra regla

Esta regla aplicada a todas las celdas (td), con ella dividimos las celdas en dos partes, dejando el contenido de la celda del lado derecho de la misma, con ello hacemos espacio para los encabezados de cada linea.

4ta regla

En ella, hacemos uso del pseudo elemento Before, recordemos que este nos permite agregar elementos una posición atrás de cualquier elemento XML, y en este caso lo que estamos haciendo con esta regla es dejar un espacio del 45% antes de todos los td.

5ta regla

Mas bien son un conjunto de reglas, pero aplicamos lo mismo, en ella hacemos uso de la pseudo clase nth-of-type, para insertar un contenido en cada una de las lineas de nuestra tabla y lo combinamos con before, para que lo haga en el espacio en blanco que dejamos y coloque los títulos de cada una de las celdas.

Ya para terminar les dejo el link al diseño original.

http://css-tricks.com/responsive-data-tables/

y el enlace para que descarguen el ejemplo.

http://db.tt/CfFKbS5J

Anuncios

Acerca de sistemasumma

Blog dedicado a la tecnología y a todos los estudiantes de sistemas, informatica, computación y afines
Esta entrada fue publicada en Lenguajes de aplicaciones y etiquetada , , , . Guarda el enlace permanente.

7 respuestas a Responsive Design VI: tablas que se adaptan

  1. Lolo Rivera dijo:

    Hola que tal,. felicidades por el post es super util,. solo queda una gran duda
    Como aplicas esto a 2 tablas diferentes?
    Salu2.

    Me gusta

    • sistemasumma dijo:

      es simple, solo le colocas el mismo nombre de clase a ambas tablas y aplicas las reglas de CSS a trabes del nombre de la clase, de esa forma se aplica a todas las tablas que tengas en la misma pagina

      Me gusta

      • lacbs dijo:

        Perdon, formule mal mi pregunta, lo que realmente quería saber, es como crear 2 clases .table para aplicar diferentes estilos a varias tablas, cree .table y .table2 pero al aplicar el class, el. 1ro aplica las reglas del 2do, salu2

        Me gusta

        • sistemasumma dijo:

          para tu caso es mejor usar ID en vez de class, y tu problema se debe a que en las reglas del media query usamos reglas de etiqueta, por lo que se aplican a las dos tablas, por igual, así que en lugar de usar reglas de etiqueta deberás cambiarlas por de clase y colocar a todos las etiquetas de la regla dicha clase, de esa forma podrás crear estilos para ambas tablas.

          Me gusta

  2. amelie dijo:

    Muchas gracias 🙂

    Me gusta

  3. RitzCOP dijo:

    Excelente! queda de lujo, super. Gracias por el recurso, sigue estudiando css tricks x fa…

    Me gusta

¿Qué estas pensando?

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s