You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
Mathieu Jaumotte ec54f8b8bb Merge remote branch 'origin/master' 2 years ago
js improve 2 years ago
scss improve 2 years ago
.gitignore initial commit 2 years ago
README.md correction readme 2 years ago
docker-node.sh initial commit 2 years ago
index.html initial commit 2 years ago
index2.html initial commit 2 years ago
index3.html improve 2 years ago
package.json initial commit 2 years ago
run.sh initial commit 2 years ago
yarn.lock initial commit 2 years ago

README.md

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

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>