tableau présenté de façon non tabulaire

[gilbert]

Bonjour,

J'ai un tableau que je voudrais présenter de façon non strictement tabulaire pour que ce soit plus sympa.
Par exemple: Lorsque la valeur d'une colonne change, je veux l'afficher, mais sinon je ne l'affiche pas. Ensuite, je voudrais sauter des lignes suivant certaines conditions.

Comment peut-on faire ?

Voici, pour exemple, le tableau.

Code : Tout sélectionner

<thead>
<th id="societe" abbr="Société">Société</th>
<th id="adresse" abbr="Adresse">Adr.</th>
<th id="civilite" abbr="civilite">Civ.</th>
<th id="prenom" abbr="Prénom">Prénom</th>
<th id="nom" abbr="Nom">Nom</th>
<th id="telephone" abbr="Téléphone">Tél.</th>
</thead>
<tfoot>
</tfoot>
<tbody>
<tr>
<td headers="societe">s1</td>
<td headers="adresse">a1</td>
<td headers="civilite">c1</td>
<td headers="prenom">pn1</td>
<td headers="nom">n1</td>
<td headers="telephone">t1</td>
</tr>
<tr>
<td headers="societe">nc2</td>
<td headers="adresse">a2</td>
<td headers="civilite">c2</td>
<td headers="prenom">pn2</td>
<td headers="nom">n2</td>
<td headers="telephone">t2</td>
</tr>
</tbody>
</table>

Merci d'avance.

[jv2759]

Je ne comprend pas vraiment ce que tu veux faire. Mais je pense que c'est plus du coter du serveur que tu peux faire cela...

Avec des condition du type, si nouveaux afficher, sinon passer...

[gilbert]

Dans l'optique de séparer contenu et présentation, je mets mes données qui sont de fait tabulaires dans un tableau.
Cependant, je voudrais, en css, faire en sorte de casser un peu l'aspect rébarbatif du tableau.

Ex: je veux afficher la valeur d'une colonne uniquement si sa valeur change. Dans un rapport, on appelle ça une "rupture".

Je voudrais aussi pouvoir sauter des lignes suivant certaines conditions de valeur.

Globalement ne pas afficher tout en tableau strict.

[jv2759]

Je ne pense pas que actuelement avec css2 on puisse gérer des rupture.

Par contre en php sur le serveur, la tu peux tres bien est pour une ligne ou tu veux faire la rupture, tu peux utiliser un css différent avec par exemple :

Code : Tout sélectionner

test{
	visibility: hidden;
}

pour ne pas afficher une ligne...

[gilbert]

Et si je veux sauter une ligne dans une cellule ?

[jv2759]

comment cela sauter une ligne?

Je ne comprend pas tres bien ce que tu veux faire...

[gilbert]

<table class="a">
<thead> <th id="societe" abbr="Soci&eacute;t&eacute;">Soci&eacute;t&eacute; </th>
<th id="adresse" abbr="Adresse" adr="">Adresse </th>
<th id="civilite" abbr="civilite" civ="">Civ. </th>
<th id="prenom" abbr="Pr&eacute;nom">Pr&eacute;nom </th>
<th id="nom" abbr="Nom">Nom</th>
<th id="telephone" abbr="T&eacute;l&eacute;phone">T&eacute;l. </th>
</thead> <tfoot> </tfoot> <tbody>
<tr>
<td headers="societe">societe1</td>
<td headers="adresse">a1</td>
<td headers="civilite">c1</td>
<td headers="prenom">pn1</td>
<td headers="nom">n1</td>
<td headers="telephone">t1</td>
</tr>
<tr>
<td headers="societe">societe1</td>
<td headers="adresse">a2</td>
<td headers="civilite">c2</td>
<td headers="prenom">pn2</td>
<td headers="nom">n2</td>
<td headers="telephone">t2</td>
</tr>
<tr>
<td headers="societe">societe2</td>
<td headers="adresse">a2</td>
<td headers="civilite">c2</td>
<td headers="prenom">pn2</td>
<td headers="nom">n2</td>
<td headers="telephone">t2</td>
</tr>
</tbody>
</table>


Je voudrais, par exemple, un rendu comme ceci:


societe1
a1
Contact: c1 pn1 n1
Téléphone: t1

a2
Contact: c2 pn2 n2
Téléphone: t2

societe2
a2
Contact: c2 pn2 n2
Téléphone: t2

Bon, on peut pas faire tout ça. Mais c'est un exemple, l'idée est de rompre la monotonie rectangulaire.

[DJiK]

Tu devrais nous faire un dessin!


Peut-être des idées ici: http://openweb.eu.org/articles/tableaux_css/

[gilbert]

http://openweb.eu.org/articles/tableaux_css/
Le dernier exemple est intéressant.
Mais c'est fait avec colspan et rowspan.
Je voudrais le faire en css.

[jv2759]

eventuelement cela doit être faisable mais sans utiliser de tableaux. Uniquement en css.

Un cadre
5 sous cadres qui font 20% de la largeur
1 sous cadre de 20%, un de 40% 2 de 20%
...
...
...