La tabla es el elemento menos reponsive que existe. Entre otras cosas porque no cabe en la pantalla si tiene demasiadas columnas.
El ejemplo que has puesto tiene ese problema, de hecho se oculta la tabla en dispositivos móviles, no se muestra porque no cabe.
La solución puede ser poner overflow-x:auto; de manera que se muestre una barra horizontal que permita recorrer toda la tabla independientemente del tamaño de la pantalla del visitante.
Un saludo
@armorlan amplío la info…
Mientras la tabla pueda adaptarse al tamaño del dispositivo puedes usar en los estilos CSS el ancho de la tabla al 100%. Para las pantallas pequeñas sale la barra de desplazamiento horizontal.
Es decir:
<div style="overflow-x:auto;">
<table>
....
... contenido de la tabla
....
</table>
</div>
y en el archivo style.css
table {
width: 100%;
}
Un saludo
Tal y como dice @lgrusin las tablas son lo menos responsive que existe. Se crearon para insertar datos tabulados en pantallas pc.. y eso hace años que ya no es lo normal.
además de lo que ya se te ha recomendado y si realmente no necesitas la estructura de tabla. Puedes con trabajo manual simular un tabla por medio de capas (etiqueta <div> ) y por medio de css y sus media querys hacer que responda a los diferentes tamaños de pantalla. Pero como te digo, no hay solución mágica automática.. serías tu mismo quien tendría que construirlo.
un «invento» que he encontrado al repasar tu duda es http://ianrmedia.unl.edu/responsive-table-generator-tool tal vez podría ayudarte.. pero no te fíes mucho y si lo usas testea mucho y en muchas pantallas.
Un saludo
Iniciador del debate
armorlan
(@armorlan)
Muchas gracias a los dos 🙂
