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.

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.

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.

Comentarios

{{ comments.length }} comentarios

Nuevo comentario

Nueva replica  {{ formatEllipsisAuthor(replyComment.author) }}

Acepto la política de Protección de Datos.

Publicar ¡Publicado! ¡Ups! Algo ha fallado, ¿Reintentamos? Enviando...

Escribe el primer comentario