Appliquer un style à une partie de table (quelques lignes)

Bonjour,

J'ai une fonction php récursive qui crée une table. Elle est récursive pour permettre la gestion de parents - enfants. Et j'aimerais que les lignes de la table contenant des enfants apparaissent un peu décalées et de plus en plus décalées pour chaque pas supplémentaire dans la hiérarchie.

Imaginons par exemple que parent2 ait 2 enfants : enfant1 et enfant2.

J'arrive à insérer dans mon code un div comme suit :

<table>
<tr><td>parent1</td><td>data</td></tr>
<tr><td>parent2</td><td>data</td></tr>
<div class='child'>
<tr><td>enfant1</td><td>data</td></tr>
<tr><td>enfant2</td><td>data</td></tr>
</div>
<tr><td>parent3</td><td>data</td></tr>
</table>

J'ai des problèmes pour que le css (quel qu'il soit) dans la classe child s'applique aux lignes de la table que je veux modifier.

Une idée? Merci!
Modifié par Sharko (15 Nov 2006 - 12:51)

bonjour,

pour commencer , le div n'a rien a voir la dedans .

Ensuite en appliquant la class a un parent il ne devrait y avoir aucun probleme pour ensuite ciblé les enfants.
ex:

<table>
<tr>
    <td>parent1</td>
    <td>data</td>
</tr>
<tr>
    <td>parent2</td>
    <td>data</td>
</tr>
<tr class='child'>
     <td>enfant1</td>
     <td>data</td>
</tr>
<tr class='child'>
    <td>enfant2</td>
    <td>data</td>
</tr>
<tr>
    <td>parent3</td>
    <td>data</td>
</tr>
</table>

et pour les styles par exemple:

table {width:500px;border:1px solid;background:#eee}
td {width:240px;border:1px solid;background:#ddd}
.child td  {padding:0.5em;background:#fff;}
.child + .child td {padding:0.5em 1em }
.child td + td {padding:0 1em;background:#def;}

A partir de la , avec ta fonction "recursive" il te suffit d'incrementer un compteur et d'augmenter par exemple le padding (gauche)de tr a chaque nouvelle td .(IE ne comprends pas toutes les regles css que je te met en exemple , autant le faire en php).

++

Merci pour ta réponse. Cependant, ce n'est pas ce que je veux. Mon objectif est décaler chaque ligne enfant de 10px vers la droite. Cependant, il se peut que des enfants aient eux-mêmes des enfants (la hiérarchie dépassera rarement 3 ou 4 niveaux), qui à leur tour doivent être décalés. En agissant sur le tr, je suis limité à un niveau de décalage.

En mettant un div qui englobe tous les enfants, je peux au sein d'un enfant mettre un nouveau div qui englobe ses propres enfants, et ainsi ajouter un niveau de décalage. C'est pq j'ai fait comme ça. Mais les div ne semblent avoit aucun effet sur les lignes du tableau. Exemple :

<table>
<tr><td>parent1</td><td>data</td></tr>
<tr><td>parent2</td><td>data</td></tr>
<div class='child'>
   <tr><td>enfant1</td><td>data</td></tr>
   <div class='child'>
      <tr><td>enfant2</td><td>data</td></tr>
      <tr><td>enfant3</td><td>data</td></tr>
   </div>
   <tr><td>enfant4</td><td>data</td></tr>
</div>
<tr><td>parent3</td><td>data</td></tr>
</table>

Modifié par Sharko (15 Nov 2006 - 13:54)

Les div n'ont pas d'effet car ils ne fond pas partie des balises structurant une table , l'erreur de "codage" se trouve surement corrige par "l'interpreteur" du navigateur qui la zappe tout simplement.

C'est ce j'essaye de te dire en te proposant de replacé ta class ailleurs , ou dans un vrai parent.

le resulat de decallage peut-etre fait dans ta boucle en inserant un caractere insecable, puis 2 , puis 3 .

Le css n'aura pas de solution pour toi dans un tableau dynamique. comment ecrire 50 class css a l'avance pour decallé 50 enfants ? surtout si un 51eme fait son apparition.
:)

++


<edit> En usant d'une liste et en inserant des "sous listes" tu auras l'aspect visuel attendu , avec un peu de mise en forme.
Modifié par gcyrillus (15 Nov 2006 - 14:24)

Ok merci. Ta remarque :

a écrit :
le resulat de decallage peut-etre fait dans ta boucle en inserant un caractere insecable, puis 2 , puis 3 .

m'a aidé à trouver une solution. J'insère le code suivant au début des lignes concernées

$move .= "&nbsp;&nbsp;";

J'ajoute $move dans tous les td que je veux déplacer. Et à la fin des lignes concernées :

$move = substr($move, 0, strlen($move) - 2);

En passant $move en paramètre de la fonction (il est initialisé à "" en dehors de la fonction), ça marche parfaitement!