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

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 ... ?
<http://www.yoyodesign.org/doc/w3c/css2/visudet.html#propdef-vertical-align>
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

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)

Bonjour.

"SAM" <stephanemoriaux.NoAdmin@wanadoo.fr.invalid> a écrit dans le message
de news: 47260032$0$25944$ba4acef3@news.orange.fr...

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
**************************************************/

Patrick 'Zener' Brunet a écrit :

Bonjour.

"SAM" <stephanemoriaux.NoAdmin@wanadoo.fr.invalid> a écrit dans le message
de news: 47260032$0$25944$ba4acef3@news.orange.fr...

[...]
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

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.

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

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;
}

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

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">
<p>...</p>
<table id="t1">
<tr>
<td>
<table id="t2">...</table>
<table id="t3">...</table>
</td>
<td>
<table id="t4">...</table>
<table id="t5">...</table>
</td>
</tr>
</table>
<table id="t6">
<tr>
<td>
<table id="t7">...</table>
<table id="t8">...</table>
</td>
<td>
<table id="t9">...</table>
<table id="t10">...</table>
</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
*/
}

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