Listes de longueur variable présentées en tableau
C'est le complément au précédent code: Le but est de stocker autant de données qu'on veut dans une colonne, peu importe la longueur des autres, et de garder un scroll synchrone.
http://javatwist.imingo.net/ikea2.htm
- Il faut deux conteneurs en display:flex (un pour l'en-tête, un pour le corps).
- L'en-tête contient une liste ul avec des li en flex:auto qui représentent les rubriques.
- Le corps contient autant de ul qu'il y a de rubriques.
- Les ul sont en flex:auto pour pouvoir être en colonne.
- Elles ont également un flex-direction:column pour que leurs li s'empilent verticalement.
- J'ai choisi de différencier la colonne "zéro" mais ça n'a rien de nécessaire.
- Les largeurs seront choisies en pourcentage du conteneur en faisant coïncider en-tête et corps.
- Les "flex" s'adaptent bien; il faut juste un pourcentage cohérent, en tenant compte de nombre de colonnes!
- Pour éviter un espace entre l'en-tête et le corps, sous Firefox, j'ai proposé une taille de caractère supérieure à 25px pour les rubriques: c'est à peu près la hauteur de la barre de défilement minimale (il faut essayer de décrémenter cette valeur pour voir l'effet).
