Une table responsive full CSS

Auparavant on avait déjà vu une technique pour rendre une table responsive, mais le problème résidait sur la compatibilité sur les navigateurs.
Dans ce billet on a refait la même technique mais sans hacking mais en full css compatible avec quasiment tous les navigateurs modernes

Voilà notre démo sur codepen qu’on va détailler un peu plus en bas :

Le rendu sur mobile sera de cette forme là :

responsive-table

La technique

Le tableau est l’élément le moins flexible dans l’intégration responsive mais tout de même après les expériences qu’on acquit, on est en mesure de résoudre le fond du problème.

Les tableaux sont bien utiles pour présenter une grande quantité de donnée mais ils s’affichent très mal sur les petites résolutions comme les téléphones et tablette et aucun plugin ne pourra régler ce problème.

La seule solution est de scroller sur sa largeur le tableau sur les différentes résolutions en jouant sur les points d’arrêts.

Mais cela n’est pas suffisant, il faudra aussi jouer sur quelques propriétés :

  • white-space: nowrap est optionnel sur l’élément table
  • Ajouter un min-width sur chaque cellule pour avoir un rendu correct
  • Utiliser le media query

Jouer avec le shadow

On s’est basé sur le billet écrit par Lea Verou sur le Pure CSS scrolling shadows, en faite on va jouer sur le shadow par rapport à la position du scroll afin que l’utilisateur puisse se positionner sur la façon dont il pourra scroller sur l’élément table.

On notera quand même qu’il faudra préfixer la propriété shadow pour qu’il puisse marcher sur tous les navigateurs.

Répondre