Simuler la balise thead en CSS

[kduchemin42]

Bonjour,

Je souhaiterais créer un style de tableau pour que tous mes tableaux "de données tabulaires" soient présentés pareil, avec une première ligne en gras et centré.

Problème : j'utilise le CMS Mambo et celui-ci ne crée pas de balises thead ! Donc je ne sais pas comment appliquer mon style seulement à la première ligne du tableau... Je sais qu'il existe une histoire de "display : table-header-group;" mais je ne sais pas comment l'utiliser...

Voilà le code que j'ai pour l'instant (la première ligne est rendue strictement identique aux autres avec ce code...) :

.tableau {
  border		   : solid black 2px;
  border-collapse  : collapse;
  display		  : table-header-group;
  font-weight	  : bold;
} 

.tableau td {
  border		   : solid black 1px;
  padding		  : 10px 10px 10px 10px;
  text-align	   : left;
  font-weight	  : normal;
}

Quelqu'un peut-il m'aider ?

Merci beaucoup !

Katia

Modifié 19 Septembre 2006 par kduchemin42

[PhY]

Salut !

Si cela peut t'aider: http://www.siteduzero.com/tuto-3-72-1-les-....html#ss_part_3

bon courage et bonne continuation

[aymericj]

Bonjour kduchemin42,

Juste une petite question en fait, tes tableaux, tu les réalise via l'interface wysiwyg dans des articles? Ou ce sont des tableaux créés automatiquement comme ceux de présentation des rubriques?

Si c'est le premier cas, normalement tu peux éditer le code html généré pour le modifier/compléter à ta guise.

Pour le reste je vais me renseigner, je ne me suis pas encore vraiment penché sur le couple CSS/tableaux ce qui serait une bonne chose quand même dans le cs de présentation de données tabulaires.

++

Aymeric

[kduchemin42]

Re-bonjour,

@ PhY : merci pour la réponse mais ça ne m'aide pas : l'article explique les propriétés CSS qu'on peut appliquer aux balises, à la balise thead, entre autres... Or mon problème, c'est que je n'ai PAS de balise thead !

@ Aymericj : les tableaux sont créés "à la main" par les rédacteurs lors de la rédaction d'articles. En fait j'interviens ponctuellement sur un site en Mambo, j'essaye de créer tous les styles nécessaires pour que les "vrais" rédacteurs du site puissent ensuite rédiger sans se poser la moindre question. Du genre, créer un tableau et ne pas avoir du tout à le mettre en forme, ni avec du HTML ni même avec le mode WYSIWYG ! Les rédacteurs en question ne connaissent absolument pas HTML, et le formatage WYSIWYG de Mambo étant apparemment capricieux / pas vraiment maniable... je préfèrerais qu'ils n'aient pas besoin de s'en servir ! D'où l'idée d'avoir des styles tout beaux tout propres prêts à l'emploi !

Si vous pouviez m'aider... ce serait super !

[captain_torche]

Il faudra, d'une manière ou d'une autre, que tu identifies tes cellules "titre" comme telles. Ou alors je n'ai pas bien saisi le sens de ta question.

[kduchemin42]

J'AI TROUVÉ !!! Bien sûr, ça ne marche pas dans Internet Explorer...

Alors...

@ captain_torche : oui tout à fait, il fallait identifier les cellules "titres" comme telles. Mais ce que je me demandais, c'est si ce n'était pas possible de faire ça automatiquement, avec CSS ?

J'ai envisagé un pseudo-élément .after qui aurait créé une balise thead... Mais ça n'aurait pas été trop possible, vu qu'on ne peut pas lui indiquer où positionner la balise </thead>...

Sinon il y avait l'histoire du table-header-group... Mais je n'ai pas trop compris comment ça fonctionnait...

Le pseudo-élément first-line, ça n'avait pas l'air de trop correspondre à ce que je voulais faire...

Finalement, le pseudo-élément first-child fait ce que je veux ! Voici mon code :

.tableau {
  width			: 80%;
  margin-left	  : auto;
  margin-right	 : auto;
  border-collapse  : collapse;
  border		   : solid black 2px;
} 


.tableau td {
  border		   : solid black 1px;
  padding		  : 10px 10px 10px 10px;
  text-align	   : left;
  font-weight	  : normal;
}

.tableau tr:first-child td {
  font-weight	  : bold;
  text-align	   : center;
}

Pour plus d'infos, vous pouvez aller voir les explications sur le pseudo-élément first-child sur le site Yoyodesign ! Ou aller voir deux exemples plus parlants sur le site Stylescss et sur le Mozilla Developer Center.

Par ailleurs, si quelqu'un a une autre idée de génie pour faire ça, et qui fonctionnerait dans IE... Je suis toujours preneuse ! Sinon je me contenterais des navigateurs "modernes" ! ;-)

Bonne fin de journée à tous !

Katia