38 lines
1.2 KiB
Markdown
38 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>
|
|
```
|