Objectif

Rendre un tableau sans utiliser de balises <table>, en utilisant des balises <div> + du positionnement flexbox, et qui adopte un positionnement responsive avec basculement pour les 3 tailles large (L), medium (M) et small (S).

Taille par défaut: Large.

La solution prévoit de gérer avec du javascript l'entête (thead) qui se déploie différemment pour les tailles M et S.

Nodejs

• mise en place de sass
  • bash docker-node.sh
  • yarn install
• compiler les fichiers sass
  • yarn run scss

Let's go

• lancer un serveur web
  • bash run.sh
  • http://localhost:8000/index3.html

TODO

• prévoir plusieurs tableaux sur une seule page
• se rapprocher davantage de la structure html d'un tableau (ajouter thead et tbody)
• BUG: js l.57: la règle 'not small' est jouée pour écran L, alors qu'elle est prévue pour le basculement de S vers M

Limites

• En taille par défaut (L), la largeur des colonnes du tableau est déterminée par des propriétés flex côté css, pour personnaliser il faut donc surcharger en insérant dans le html :

<style>
#my-table .td:nth-child(1) { flex: 1; } 
#my-table .td:nth-child(2) { flex: 4; }
#my-table .td:nth-child(3) { flex: 6; }
#my-table .td:nth-child(4) { flex: 2; }
</style>