Tablas en responsive

Seguramente alguna vez hemos tenido problemas a la hora de crear una tabla, y que además se visualice correctamente en webs adaptativas o responsive. Investigando una manera de mostrar las tablas de manera decente, encontré esta página que me parece bastante interesante para solucionar el problema.

Nos dan tres opciones posibles en cuanto a mostrar una tabla en dispositivos móviles.

1º - The Unseen Column

Esta opción básicamente oculta los elementos menos importantes. La tabla de ejemplo tiene nueve columnas, cuando la resolución de pantalla llega a 800px oculta la segunda columna con la propiedad nth-child(n) Esta es una propiedad de CSS3 que básicamente quiere decir elemento hijo. Donde está (n) tenemos que introducir un número. Por lo que si ponemos td:nth-child(2){display:none;} ocultará la segunda columna de la tabla, en este caso. Se puede ver el código en la página. Esto era una aclaración por si hay dudas.

2º - Flip Scroll

El efecto que se consigue con esta opción es un poco feo desde mi punto de vista. Lo que hace es crear un scroll al contenido de la tabla. A la parte del encabezado, los titulares (thead), se le aplica un float:left y display:block para mostrarlo de manera vertical. Al resto de la tabla (tbody) se le da un ancho automático y un overflow:scroll para poder desplazar el contenido.

3º - No More Tables

Por último tenemos este recurso que es el que más me ha gustado aunque utiliza elementos de HTML5 y habría que ver cómo solucionar la compatibilidad con versiones antiguas de Explorer. Cuando se redimensiona el navegador oculta las cabeceras de la tabla (thead) pero NO con display:none le asigna una posición absoluta y negativa forzando a que las cabeceras estén fuera de la estructura. Esto es básicamente por el posicionamiento web. En cuanto al contenido de la tabla, lo que hace es mostrarlo en filas en vez de columnas para tener una mejor disposición del contenido. Espero que se haya entendido bien, en la web podéis redimensionar el navegador, ver el código y entenderlo mejor.