[Résolu] CSS Tableau horizontal

Bonjour à tous,

je travaille actuellement avec des tableaux de données et j'aurais besoin de présenter mon tableau de manière horizontale. Soit avec les entêtes sur la gauche - en colonne - et les données en ligne. En gros je souhaite transposer mon tableau.
Jusque là rien de difficile, sauf que je souhaite utiliser les sections (caption, thead, tfoot et tbody)
En gros la présentation que je souhaiterais avoir est celle-ci :
---------------------------------
| . . . . . . . .caption . . . . . . . . .|
---------------------------------
------- -------------------------
| . . . .| | . . . . . . . . . . . . . . . .|
|thead| | . . . . tbody . . . . . . . .|
| . . . .| | . . . . . . . . . . . . . . . .|
------- -------------------------
---------------------------------
| . . . . . . . .tfoot . . . . . . . . . . |
---------------------------------

Est ce que quelqu'un sait si c'est possible uniquement en CSS (sur du XHTML 1.0), et avec compatibilité IE 6 FF 7?

Merci d'avance.

PS: j'espère que la présentation "ascii" passera pour tout le monde
Modifié par DakoR (24 Jul 2007 - 09:38)

je sais que tu peux toujours remplacer le premier <td> par un th dans la ligne, et ainsi lui attribuer un style spécial... le problème c'est que dans ce cas la tu devra te passer de thead et tbody

Je crois avoir vu une autre soluce mais impossible de remettre la main dessus...

pour le th dans le tbody j'y ai pensé, mais comme j'aivraiment besoin de garder le thead et le tfoot je cherche plutôt à positionner les sections... mais j'arrive à rien avec IE et à des trucs pas supers avec FF

pk veux tu garder thead tfoot tbody? hum c'est mieux pour la strucure ok

on peut voir ce que tu a tenté?

Comme tu l'as dit je garde pour la structure et car je bosse sur de l'accessibilité web en même temps.

Pour le code voilà un extrait d'une des tentatives (je ne mets que le CSS, le XHTML étant tout ce qu'il y a de plus standard : caption, thead>tr>th*, tbody>tr*>td*, tfoot>tr>td{1})

le table est associé au style .tabTranspose

.tabTranspose thead tr, tbody tr{
	/*display: inline;
	float:left;*/
	display: table-cell;
}

.tabTranspose thead td, thead th, tbody td, tbody th{
	/*display: block;*/
	display: table-row;
}

.tabTranspose thead{
	/*display: inline;
	float:left;*/
	display: table-row-group;
	border: 1px solid green;
}

.tabTranspose tbody{
	/*display: inline;
	position: relative;
	top: 0px;*/
	border: 1px solid red;
}

.tabTranspose tfoot{
	/*width: 100%;
	position: relative;
	bottom: 0px;
	left: 0px;*/
	border: 1px solid blue;
}

En commentaire j'ai laissé la première version de mes essais. Si vous testez, vous verrez que ce n'est pas vraiment concluant : notamment retour à la ligne entre le thead et le tbody sous FF, et sous IE... aucun effet du tout!

Je commence même à me demander si il est possible de changer le type de display sur les éléments de tableaux avec IE...

J'avais commencér sur la piste d'utiliser le display, mais peut être que je me plante totalement et qu'il y a une autre méthode?

Avec la première solution il y a aussi des problèmes de largeurs des éléments dont j'ai fait abstraction, étant donné que je voulais obtenir un bon positionnement en premier.

J'ai aussi essayé de gérer le positionnement avec des margin négatifs, mais la solution n'est pas satisfaisante étant donné que je gère ici des données dynamiques (donc les valeurs de margin sont potentiellement dynamique aussi ) et que - accessibilité oblige - il est souhaitable que j'évite le javascript

Au final, je commence à me demander si ce que je cherche à faire est tout simplement techniquement faisable avec les moyens dont je dispose?

En tout cas merci d'avance pour les avis
Modifié par DakoR (18 Jul 2007 - 17:07)

la solution a ce problème m'interesse...

la solution sans thead/tbody/tfoot et avec un th a la place de chaque td au debut de chaque tr est valide, et reste, je pense, accessible.

Une solution alternative consisterais a changer la disposition des données... quart de tour et hop ... bon, ok, c'est facile.

pour ce qui est de l'accessibilité, tu utilise des display: table-cell qui ne sont pas supporté par IE.

bah justement j'ai fait mes tests sous FF au départ et je me suis vite rendu compte que ce n'était pas compatible IE (déjà que ça roulait pas vraiment sous FF ).
Comme je commence à m'intéresser justement aux problèmes d'accessibilité et compatibilités, je ne connais pas encore tous les petits écueils dans ce style...

bonjour

Dans IE il est effectivement impossile d'appliquer un

display:table;

a un div , tout comme il est impossible d'appliquer un

display:block;

a un td , la ou nombre d'autre navigateurs peuvent le faire.

Si tu veut garder la structure de ton tableau (donc ton tableau) , il faudra te resoudre a l'idée qu'il ne te sera pas possible d'en modifier l'affichage dans IE , caption , tr , etc ... garderont leur style par defaut.

Si tu veut alors agir avec plus de souplesse sur la mise en forme, le tableau est a evité , a cause justement de cette rigidité qu'il a dans IE en termes de mise en forme.

Pour remplacer ton tableau par un balisage different , Je ne saurai te conseillé , si le tableau est adapté , il n'y a alors pas vraiment d'equivalent.

A partir d'un balisage sans tableau , il est possible en partie de simuler le display:table; dans IE en jouant sur le layout.

Cependant , cette alternative a quelques limites des que l'on veut un truc totalement fluide et appliquer des fonds differents par "zones".

En bref , impossible de stylé un tableau autrement que comme un "tableau" dans IE .

GC

snif j'en avais bien peur à force d'essai...

en tout cas merci beaucoup pour vous être penché sur le sujet.