Estilos responsive para tablas

[…]


por

Difícilmente utilizarás ya tablas para maquetar contenido en html. Pero si que es posible, y a mi me ha pasado, que tengas que adaptar páginas web de hace ya un tiempo a dispositivos portátiles como móviles y tablets.

Es un trabajo entretenido, y según cómo esté diseñada y maquetada la web, bastante tedioso.

Uno de los elementos que más problemas da a la hora de adaptar a pantalla pequeña son las tablas.

Si os habéis encontrado con el mismo problema, estos estilos quizás os pueden servir.

En algunos casos he tenido que hacer algún ajuste en general, pero para la mayoría de páginas me ha ido perfecto:

 

@media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) {
 table, thead, tbody, th, td, tr { display: block; }
 thead tr { position: absolute; top: -9999px; left: -9999px; }
 tr { border: 1px solid #ccc; }
 td { border: none; border-bottom: 1px solid #eee; position: relative; padding-left: 50%; }
 td:before {  position: absolute; top: 6px; left: 6px; width: 45%; padding-right: 10px; white-space: nowrap; }
 }