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:
A una tabla donde la información se despliegue de forma vertical, como la siguiente:
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:
Como podemos observar, no hay nada nuevo en el código HTML, todo ocurre en el siguiente CSS
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.
Sistemasumma.com 
el enlace esta caido 😦
Me gustaMe gusta
Hola que tal,. felicidades por el post es super util,. solo queda una gran duda
Como aplicas esto a 2 tablas diferentes?
Salu2.
Me gustaMe gusta
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 gustaMe gusta
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 gustaMe gusta
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 gustaMe gusta
Muchas gracias 🙂
Me gustaMe gusta
Excelente! queda de lujo, super. Gracias por el recurso, sigue estudiando css tricks x fa…
Me gustaMe gusta
Gracias por el comentario
Me gustaMe gusta