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

**javatwister** · 30/04/2020, 09h00

Ben oui; ça marche pour des données "contrôlées"...

**Doksuri** · 30/04/2020, 09h08

sinon un petit white-space:nowrap; text-overflow:ellipsis; et on n'en parle plus

**javatwister** · 30/04/2020, 09h21

Oui, j'ai testé sur la version "maison" mais c'est frustrant quand même; il me faudrait un genre de "title" qui apparaisse avec le texte entier...

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

**javatwister** · 30/04/2020, 10h14

@Dave Hiock

une table semble plus appropriée et HTML'ment parlant plus simple.

Oui, c'est la sagesse qui s'exprime par tes mots...

Mais pour une fois que je tente un css-only, je voulais du no-script absolu

Et je n'ai pas trouvé moyen de faire ça avec un élément table...

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

Envoyé par javatwister

Et je n'ai pas trouvé moyen de faire ça avec un élément table...

Tu as la discussion : Table scrollable avec colonne fixe dont tu as même fait référence dans ton autre contribution, mais il est vrai que non compatible IExplorer.

Cela reste un bel exercice de style !

**javatwister** · 30/04/2020, 10h42

Envoyé par Dave Hiock

Tu as la discussion : Table scrollable avec colonne fixe dont tu as même fait référence dans ton autre contribution, mais il est vrai que non compatible IExplorer.

Cela reste un bel exercice de style !

Non. C'est un enjeu très différent.