40 lines
1.2 KiB
Markdown
40 lines
1.2 KiB
Markdown
|
|
||
|
|
## 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 :
|
||
|
|
```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>
|
||
|
|
```
|