Lección 8: Tablas
El problema de las tablas es que tienden a ocupar mucho espacio horizontal, y no podemos partirla según mengue la anchura del navegador. Por ello, la técnica es envolverlo en un contenedor con overflow-x: auto. De este modo dispondremos de un scroll que ayudará a verla completa sin romper el diseño.
.container-table {
overflow-x: auto;
}
<div class="container-table">
<table>
...
</table>
</div>
Reduce su anchura hasta que se muestre el scroll horizontal. Comprobarás que el scroll no se muestra en el table, sino en el section que lo contiene.
| Nombre | Edad | Localización | Profesión | Hijos | Casado |
|---|---|---|---|---|---|
| Juan | 45 | Valencia | Programador | 2 | Si |
Ahora ya podemos disponer de tablas que puedan ser vistas en dispositivos móviles sin romper el diseño.
Esta obra está bajo una Licencia Creative Commons Atribución-NoComercial-SinDerivadas 4.0 Internacional.
¿Me ayudas?
No te sientas obligado a realizar una donación, pero cada aportación mantiene el sitio en activo logrando que continúe existiendo y sea accesible para otras personas. Además me motiva a crear nuevo contenido.
Comentarios
Nuevo comentario
Nueva replica {{ formatEllipsisAuthor(replyComment.author) }}
Escribe el primer comentario
{{ formatDate(fields.createdAt) }}
{{ filterHTMLTags(fields.message) }}
{{ comments.length }} comentarios