Listes de longueur variable présentées en tableau

**javatwister** · 29/04/2020, 17h56

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).

Invité · 29/04/2020, 18h42

RIEN compris...

**javatwister** · 29/04/2020, 18h59

Je m’en doute. C’est à cause des neurones que tu as grillés à cause de la délégation

**psychadelic** · 29/04/2020, 19h24

et ? quelle est la question / problème ?

Je ne savais pas qu'on pouvait être somnambule dès l'age de 1 an !

**Doksuri** · 30/04/2020, 08h23

je crois qu'il voulait nous presenter un code source... developpez.com/telecharger/Codes-Sources

Invité · 30/04/2020, 08h28

Vu

Par contre, dès qu'une case/cellule contient un texte (trop) long, ça décale toute la colonne, et ça ne fonctionne plus...

**Dave Hiock** · 30/04/2020, 10h05

Envoyé par psychadelic

et ? quelle est la question / problème ?

Peut-être parce que l'on est dans la partie Contribuez du forum

On ne peut que félicité le travail et le partage, mais dans le cas présent et en présence de données tabulaires une table semble plus appropriée et HTML'ment parlant plus simple.