css selector pour sélectionner la première de deux tables imbriquées ?

Le
Zouplaz
Bonjour, si dans un div j'ai deux tables imbriquées quelle est le
sélecteur css qui permet de désigner la première colonne de la première
table ?

j'ai essayé ceci
div.form-zone:first-child table tr td:child-child { vertical-align:top }
ou
div.form-zone table:first-child tr td:first-child { vertical-align: top;}

Le second ne donne rien, et le premier reproduit également l'alignement
sur la table imbriquée.


Merci
Questions / Réponses high-tech
Vidéos High-Tech et Jeu Vidéo
Téléchargements
Vos réponses Page 1 / 3
Gagnez chaque mois un abonnement Premium avec GNT : Inscrivez-vous !
Trier par : date / pertinence
SAM
Le #22088541
Zouplaz a écrit :
Bonjour, si dans un div j'ai deux tables imbriquées quelle est le
sélecteur css qui permet de désigner la première colonne de la première
table ?



bon ...
1) les tables c'est mal
2) les tables imbriquées c'est encore + beurk :-(

Ceci dit,
http://www.yoyodesign.org/doc/w3c/css2/selector.html#x25

et donc pour la table imbriquée :

#grandeTable #petiteTable tr td:first-child { color: red }

ou :

table table tr td:first-child { color: red }

ou :

div#monDiv table table tr td:first-child { color: red }

ou (pour ttes tables du div "monDiv") :

div#monDiv tr td:first-child { color: red }

ou (pour la table principale, objet du post me semble-ce) :

div#monDiv table:first-child tr td:first-child { color: red }


Donc ton code devrait faire.
Mais ça ne doit pas fonctionner avec IE <=6


div.form-zone table:first-child tr td:first-child { vertical-align: top;}



Pas certain que vertical-align soit approprié pour les TDs ... ?
me disent :
"à l'intérieur ... des boîtes générées par un élément de type en-ligne"

(testé, ça fonctionne dans Firefox et même dans Safari 2)

--
sm
Olivier Miakinen
Le #22088521
Le 29/10/2007 15:53, Zouplaz a écrit :
Bonjour, si dans un div j'ai deux tables imbriquées quelle est le
sélecteur css qui permet de désigner la première colonne de la première
table ?

j'ai essayé ceci
div.form-zone:first-child table tr td:child-child { vertical-align:top }


^^^^^

Tu as ça dans ton code, ou bien c'est une coquille dans ce seul
article ?

ou
div.form-zone table:first-child tr td:first-child { vertical-align: top;}

Le second ne donne rien, et le premier reproduit également l'alignement
sur la table imbriquée.



Je propose :

div.form-zone > table:first-child > tbody > tr > td:first-child {
vertical-align: top;
}

Ou alors peut-être :

div.form-zone table:first-child tr td:first-child {
vertical-align: top;
}
div.form-zone table:first-child table tr td:first-child {
vertical-align: baseline;
}
div.form-zone table table:first-child tr td:first-child {
vertical-align: baseline;
}

(Non testés)
Patrick 'Zener' Brunet
Le #22088491
Bonjour.

"SAM" de news: 47260032$0$25944$
Zouplaz a écrit :
> Bonjour, si dans un div j'ai deux tables imbriquées quelle est le
> sélecteur css qui permet de désigner la première colonne de la première
> table ?
[...]
div#monDiv table:first-child tr td:first-child { color: red }

Donc ton code devrait faire.
Mais ça ne doit pas fonctionner avec IE <=6




Mais si, il suffit de terminer le développement du navigateur soi-même :o)

http://www.gatellier.be/blog/css-pseudo-classes-internet-explorer/

Encore un HTC à fabriquer... Que c'est nuuuuuuuuuuul !

--
Cordialement.
--
/**************************************************
* Patrick BRUNET
* E-mail: lien sur http://zener131.free.fr/ContactMe
**************************************************/
SAM
Le #22088461
Patrick 'Zener' Brunet a écrit :
Bonjour.

"SAM" de news: 47260032$0$25944$
[...]
div#monDiv table:first-child tr td:first-child { color: red }

Donc ton code devrait faire.
Mais ça ne doit pas fonctionner avec IE <=6



Mais si, il suffit de terminer le développement du navigateur soi-même :o)

Encore un HTC à fabriquer... Que c'est nuuuuuuuuuuul !



Normalement il y avait une bibli appelée IE7 qui était censée faire tout
ça ...
http://dean.edwards.name/IE7/

--
sm
Zouplaz
Le #22088441
le 29/10/2007 16:56, Olivier Miakinen nous a dit:
Le 29/10/2007 15:53, Zouplaz a écrit :
Bonjour, si dans un div j'ai deux tables imbriquées quelle est le
sélecteur css qui permet de désigner la première colonne de la première
table ?

j'ai essayé ceci
div.form-zone:first-child table tr td:child-child { vertical-align:top }


^^^^^

Tu as ça dans ton code, ou bien c'est une coquille dans ce seul
article ?



Non c'était une coquille ici uniquement


ou
div.form-zone table:first-child tr td:first-child { vertical-align: top;}

Le second ne donne rien, et le premier reproduit également l'alignement
sur la table imbriquée.



Je propose :

div.form-zone > table:first-child > tbody > tr > td:first-child {
vertical-align: top;
}




Marche pas... Non plus sans le >
Ca ne produit aucun alignement

Ou alors peut-être :

div.form-zone table:first-child tr td:first-child {
vertical-align: top;
}



Non plus

div.form-zone table:first-child table tr td:first-child {
vertical-align: baseline;
}
div.form-zone table table:first-child tr td:first-child {
vertical-align: baseline;
}




Ceux là je tente pas, car c'est pas seulement le vertical-align que je
cherche à laisser intact mais toutes les propriétés des tables imbriquées.
Zouplaz
Le #22088431
le 29/10/2007 16:45, SAM nous a dit:

Ceci dit,
http://www.yoyodesign.org/doc/w3c/css2/selector.html#x25




Déjà lu !! Hé je RTFM quand même !

et donc pour la table imbriquée :

#grandeTable #petiteTable tr td:first-child { color: red }

ou :

table table tr td:first-child { color: red }

ou :

div#monDiv table table tr td:first-child { color: red }

ou (pour ttes tables du div "monDiv") :

div#monDiv tr td:first-child { color: red }

ou (pour la table principale, objet du post me semble-ce) :

div#monDiv table:first-child tr td:first-child { color: red }





Oui mais là tu affectes la table imbriquée, moi ce que je veux c'est
l'ignorer : altérer les attributs de la table extérieure sans que ça
n'impacte ce qui est dedans.

Pour être plus précis, l'intérieur de ma table contient un éditeur
online (tiny mce) et je veux éviter de semer la pagaille dans ses
propres feuilles de styles ainsi qu'altérer le format du texte édité.

Après, savoir si je devrais me passer des tables - je cherche même pas.
On va pas troller mais j'ai déjà tenté plusieurs fois les formulaires
sans tables et j'ai encore mal où je pense ;-) Alors dans la mesure où
il y a plus important et qu'en plus c'est pour de l'intranet : je zappe
Olivier Miakinen
Le #22088421
Le 30/10/2007 12:31, Zouplaz a écrit :
Je propose :

div.form-zone > table:first-child > tbody > tr > td:first-child {
vertical-align: top;
}



Marche pas... Non plus sans le >
Ca ne produit aucun alignement



Et si tu nous donnais ton code html ? S'il y a des éléments
intermédiaires entre le div et la table, par exemple, c'est normal
que ça ne marche pas avec le >.

En revanche, sans aucun > cela devrait marcher (ou alors il faut
supprimer tbody, mais ça m'étonne).

Ou alors peut-être :

div.form-zone table:first-child tr td:first-child {
vertical-align: top;
}



Non plus



Ah ? Parce que la « première table » n'est pas la première dans le div ?
Voir (¹).

div.form-zone table:first-child table tr td:first-child {
vertical-align: baseline;
}
div.form-zone table table:first-child tr td:first-child {
vertical-align: baseline;
}



Ceux là je tente pas, car c'est pas seulement le vertical-align que je
cherche à laisser intact mais toutes les propriétés des tables imbriquées.



Eh, c'était un seul exemple, pas trois ! Les deux règles suivantes
étaient censées compenser dans la table imbriquée la règle pour la
première table.



(¹) Que donne ceci ?
div.form-zone > table > tbody > tr > td:first-child {
vertical-align: top;
}
SAM
Le #22088401
Zouplaz a écrit :
le 29/10/2007 16:45, SAM nous a dit:

ou (pour la table principale, objet du post me semble-ce) :

div#monDiv table:first-child tr td:first-child { color: red }



Oui mais là tu affectes la table imbriquée,



Non, justement pas, j'affecte la première table du div monDiv
Celle imbriquée, donc à minima 2ième, ne devrait pas réagir.

Bon ... j'aurions mal vu sur mes tests ?
Alors faut restyler les tables imbriquées :


div#monDiv table tr td:first-child {
color: red;
vertical-align: top
}
div#monDiv table table td,
div#monDiv table table tr td:first-child {
color: black;
vertical-align: middle;
height: auto
}


Voir démo (lien en bas)

Pour être plus précis, l'intérieur de ma table contient un éditeur
online (tiny mce) et je veux éviter de semer la pagaille dans ses
propres feuilles de styles ainsi qu'altérer le format du texte édité.



bon eh ben tu n'as qu'à mettre en forme avec ot' chose que des tables

ou

styler précisément ces imbrications

Après, savoir si je devrais me passer des tables - je cherche même pas.
On va pas troller mais j'ai déjà tenté plusieurs fois les formulaires
sans tables et j'ai encore mal où je pense ;-) Alors dans la mesure où
il y a plus important et qu'en plus c'est pour de l'intranet : je zappe



Pourtant si tu code en html "propre" styler ne devient plus un si grand
casse-tête, même pour des formulaires.

Tu as à ta disposition tout un arsenal html : fieldset, legend, label
http://cjoint.com/?kEp5SrNq3w

--
sm
Olivier Miakinen
Le #22088391
Le 30/10/2007 15:59, SAM a écrit :

div#monDiv table:first-child tr td:first-child { color: red }



Oui mais là tu affectes la table imbriquée,



Non, justement pas, j'affecte la première table du div monDiv



Plus exactement : la table du div monDiv, si et seulement si c'est le
premier élément de ce div.

Celle imbriquée, donc à minima 2ième, ne devrait pas réagir.



Si la table imbriquée est le premier élément d'un TD de la première
table, elle réagira.

Un petit exemple, car j'ai l'impression que vous vous fourvoyez tous les
deux sur ce que veut dire « first-child » :

<div id="monDiv">
<table id="t1">
<tr>
<td>
</td>
<td>
</td>
</tr>
</table>
<table id="t6">
<tr>
<td>
</td>
<td>
</td>
</tr>
</table>
</div>

div#monDiv table:first-child {
/*
Ceci impactera t2, t4, t7 et t9
mais pas t1, t3, t5, t6, t8 ni t10
*/
}
SAM
Le #22088371
Olivier Miakinen a écrit :

Un petit exemple, car j'ai l'impression que vous vous fourvoyez tous les
deux sur ce que veut dire « first-child » :


(...)
div#monDiv table:first-child {
/*
Ceci impactera t2, t4, t7 et t9
mais pas t1, t3, t5, t6, t8 ni t10
*/
}



Non ça marche pô !
Testé ... ça s'applique bien à la première table du div (comme de juste)
Et même pire ... les sous-tables héritent du style !

Pour attaquer la 1ère table d'1 TD de la table principale c'est :
div#monDiv table table:first-child { color: red; }
ou :
div#monDiv td table:first-child { color: red; }

De plus ... ce n'est pas le propos ... !
(du moins si j'ai bien compris).


Le propos est de styler la 1ère colonne de la table *principale*
soit le 1er TD de chaque TR

#mondiv table tr td:firstchild { color: red }
ou
#mondiv tr td:firstchild { color: red }

Le propos (en annexe) est que les tables imbriquées dans celle
principale ne soient pas stylées.
A défaut de styler sur une class donnée à la table principale, pour ne
pas aussi styler les tables imbriquées(*), je ne vois que la soluce de
styler le contraire pour ces dernières.

#mondiv table table tr td:firstchild { color: black }
ou ?
#mondiv table table td { color: black }
ou ... et ?
#mondiv table tr td:firstchild table td { color: black }

Pour "dé"styler il faut le prévoir en 1ière colonne ET en colonne
normale de chaque sous table

div#monDiv table table td,
div#monDiv table table tr td:first-child { color: black }

Revoir l'exemple qui fonctionne chez moi
http://cjoint.com/?kEp5SrNq3w


(*) le coup de la class sur table principale
ne donne pas mieux que le reste :-(
--
sm
Publicité
Poster une réponse
Anonyme