28173 sujets

CSS et mise en forme, CSS3

[Résolu] Afficher une liste de définition comme un tableau

Bonjour,

Je voudrais présenter une liste de définition comme un tableau à deux colonnes, où sur chaque ligne, la première colonne contient la valeur de dt et la seconde colonne contient la valeur de dd.

J'ai donc en ce sens ajouté ceci dans cette feuille CSS :

dl {
display:table;
}
dt {
display: table-cell;
}
dd {
display: table-cell;
}


Lorsqu'il n'y a qu'une définition dans ma liste, ça s'affiche correctement. Mais si il y en a plusieurs, le tableau les affiches toutes sur des cellules de la même ligne.

Saurriez-vous comment corriger ça ?
Merci Smiley smile
Modifié par tsing (12 Sep 2007 - 20:17)
Bonsoir,
avant de continuer dans cette voie, il faudra que tu puisses nous dire
ce que tu veux obtenir et avec quel type de données. Ceci afin de vérifier si cette structuration est pertinente Smiley cligne
Modifié par Hermann (11 Sep 2007 - 23:43)
Modérateur
bonsoir,

il y a aussi le display:table-row; qui fait passer d'une ligne a l'autre les element qu'il contient , autant essayer de faire usage de l'ensemble des regles pour que cela fonctionne au mieux.

La difficulté reside a avoir un codage sémantique et pas orienté pour seulement la mise en forme (la, le tableau est beaucoup plus simple) , puis ensuite faire aussi la mise en forme pour un rendu semi equivalent ou alternatif acceptable pour IE .

(gros raccourcie , display:table; peut-etre simuler dans IE avec display:inline;zoom:1; difference majeure : le retour de ligne inline: oui table-cell:non ! mais tu sais deja ).

J'ai deja laché plein d'exemples et faux troll sur le forums Smiley smile .

Bonne continuation


<edit> A j'oubliais , AMHA , l'interet de la mise en place de ces 2 technique (IE et les autres ) , un peu acrobatique , se trouve probablement seulement la on l'on souhaite aligner verticalement des contenus de balise de type block les unes a coté des autres.

Pour reproduire un effet visuelle de colonnes (et/ou lignes) la techniques des elements flottants et des images de fond qui se repetent , est la plus adaptée a mettre en oeuvre.

</edit>
Modifié par gcyrillus (12 Sep 2007 - 00:13)
Mon problème, c'est que dans le cadre d'une liste de définition, je ne peux pas utiliser le display:table-row; car il n'y a pas d'élément entre une définition et sa définition. Par contre, si dans ma liste je n'ai qu'une définition, là je peux utiliser display:table-row; sur la balise dl. Mais je n'ai pas qu'une seule définition... Smiley smile

@Hermann: J'aimerais obtenir une liste de terme dont je donne une définition... C'est vrai que je pourrais utiliser directement un tableau, mais il s'agit plus d'une liste de définition plutôt que de données tabulaires.
À priori ça ne marchera pas avec display: table-cell, vu que tu n'as pas d'élément pour jouer le rôle du tr.

Et avec des flottants, ça ne serait pas jouable? Ça dépendra du rendu exact souhaité (un petit aperçu graphique?), mais il me semble que ça devrait pouvoir se faire.
Il faudra juste faire attention à l'interprétation de clear par IE, un peu hasardeuse dans le cadre d'une liste de flottants en colonnes.
(Quoique, à la réflexion clear n'est pas nécessaire.
Sujet clos
Aller à