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.
En caso de que sea una tabla muy larga, podemos usar position: sticky para bloquear las cabeceras.
thead {
position: sticky;
top: 0;
}
Realiza scroll en el siguiente ejemplo.
| Nombre | Edad | Localización | Profesión |
|---|---|---|---|
| Lorem. | Sed? | Ut. | Architecto? |
| Lorem. | Nihil! | Eveniet! | Eveniet. |
| Lorem. | Eveniet! | In! | Non. |
| Lorem. | Vitae? | Veniam! | Omnis. |
| Lorem. | Omnis. | Non? | Ea. |
| Lorem. | Asperiores! | Atque? | Cupiditate? |
| Lorem. | Praesentium. | Iure! | Placeat. |
| Lorem. | Ipsum! | Nostrum! | Odio? |
| Lorem. | Autem. | Quae. | Maxime! |
| Lorem. | Veritatis? | Deleniti. | Adipisci. |
| Lorem. | Veritatis! | Ipsam. | Autem. |
| Lorem. | Cumque. | Sunt. | Debitis? |
| Lorem. | Iste. | Tenetur. | Maiores? |
| Lorem. | Repellat. | Laudantium. | Inventore. |
| Lorem. | Fuga. | Soluta! | Sint. |
| Lorem. | Inventore. | Quos? | Quis. |
| Lorem. | Praesentium. | Iusto. | Inventore! |
| Lorem. | Praesentium. | Natus! | Doloremque. |
| Lorem. | Nostrum? | Fugiat! | Autem. |
| Lorem. | Modi. | Blanditiis. | Laborum. |
| Lorem. | Amet! | Nulla! | Illum? |
| Lorem. | Possimus! | Dolorem. | Dolorem! |
| Lorem. | Quas. | Molestiae. | Blanditiis! |
| Lorem. | Dolore. | Voluptatem. | Nisi? |
| Lorem. | Pariatur. | Totam? | Quaerat. |
| Lorem. | Vitae! | Consequuntur. | Atque? |
| Lorem. | Rerum! | In! | Tempora. |
| Lorem. | Vero! | Aperiam? | Tempora. |
| Lorem. | Iure! | Neque! | Delectus? |
| Lorem. | Dicta. | Magni. | Perferendis. |
| Lorem. | Voluptatum! | Veniam. | Hic. |
| Lorem. | Asperiores. | Optio. | Perferendis! |
| Lorem. | Commodi! | Reprehenderit? | Officia. |
| Lorem. | Voluptatibus! | Quasi! | Quibusdam. |
| Lorem. | Quisquam? | Aut! | Quidem. |
| Lorem. | At? | Porro. | Rerum. |
| Lorem. | Voluptatem? | Commodi. | Ab? |
| Lorem. | Dolore. | Eveniet! | Ab. |
| Lorem. | Ab? | Vitae! | Doloremque. |
| Lorem. | Qui. | Vel. | Molestiae? |
| Lorem. | Dolorum. | Magni. | Voluptatum? |
| Lorem. | Voluptatum. | Autem. | Libero? |
| Lorem. | Neque! | Rerum. | Aliquam. |
| Lorem. | Non? | Labore! | Quibusdam? |
| Lorem. | Voluptatem. | Consequuntur. | Officiis! |
| Lorem. | Dolore. | Libero! | Tenetur? |
| Lorem. | Doloremque. | Molestiae! | Deserunt. |
| Lorem. | Asperiores. | Recusandae! | Unde. |
| Lorem. | Quisquam! | Aut. | Praesentium! |
| Lorem. | Sed? | Aliquam. | Quas. |
| Lorem. | Magnam? | Voluptas! | Cum. |
| Lorem. | Iste? | Maxime? | Facilis. |
| Lorem. | Rerum! | Eligendi! | Aperiam! |
| Lorem. | Sint. | Nihil. | Deserunt. |
| Lorem. | Saepe. | Obcaecati. | Similique? |
| Lorem. | Similique! | Dignissimos! | Nemo? |
| Lorem. | Animi? | Debitis? | Aliquid! |
| Lorem. | Molestias. | Perferendis. | Temporibus. |
| Lorem. | Repellendus! | Sed. | Necessitatibus? |
| Lorem. | Provident. | Odit? | Officiis. |
No son las únicas formas de mejorar la experiencia de usuario con tablas, pero sí las baratas. También te recomiendo que sopeses la posibilidad de crear gráficos en lugar de la tabla, ya que son más fáciles de leer y de entender.
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