Estilos responsive para tablas

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…


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; }
 }
Desarrollo Web by esther solà
Resumen de privacidad

Esta web utiliza cookies para que podamos ofrecerte la mejor experiencia de usuario posible. La información de las cookies se almacena en tu navegador y realiza funciones tales como reconocerte cuando vuelves a nuestra web o ayudar a nuestro equipo a comprender qué secciones de la web encuentras más interesantes y útiles.