Aller au contenu

[CSS] Problème d'enfant dans des tables imbriquées


JarAsh

Messages recommandés

Bonjour à tous !

J'ai besoin de vous pour m'éclaircir sur un petit problème en css.

J'ai une table conteneur avec dedans, une autre table imbriqué dans un <td>

Voici la source :

<table id="test">
	<tr>
		<td>
			test 1
			<table>
				<tr>
					<td>test 2</td>
				</tr>
			</table>
		</td>
	</tr>
</table>

J'aimerai savoir comment appliquer un style au td enfant de l'id "test", sans que celui situé dans la table imbriqué soit affecter. (J'espère que je suis clair ^^).

J'ai alors pensé au symbole CSS ">" qui permet d'affecter un style juste à un enfant d'une balise :

#test > tr > td
{
 border: 1px solid red;
}

Problème : ça ne fonctionne pas et je ne sais pas pourquoi ^^

J'ai alors tenté la même méthode avec des <div> plutôt que des <table>

Le code html :

<div id="test2">
	<div>
		test 3
		<div>
			test 4
		</div>
	<div>
</div>

Le code CSS :

#test2 > div
{
 border: 1px solid red;
}

Et là, ça fonctionne !

Donc voici ma question : Pourquoi ça ne fonctionne pas avec les tables, qu'ai-je fais de mal ?

J'espère avoir été clair -_-'

Merci de votre aide :)

Lien vers le commentaire
Partager sur d’autres sites

J'ai alors pensé au symbole CSS ">" qui permet d'affecter un style juste à un enfant d'une balise :

Problème : ça ne fonctionne pas et je ne sais pas pourquoi ^^

D'après ce que j'ai vu récemment au taf :

#test tr td

{

border: 1px solid red;

}

J'ai pas testé hein, mais je suis presque sûr que cela fonctionnera :humour:

Lien vers le commentaire
Partager sur d’autres sites

Malheureusement non :(

Si je fais ça, ça s'applique aux 2 <td>.

Mais merci quand meme :)

Après c'est sur je peux rajouter ça :

#test table tr td {border:0}

Mais j'aimerais savoir pourquoi ce ce code ne fonctionne pas :(

Lien vers le commentaire
Partager sur d’autres sites

Quel(s) navigateur(s) utilises-tu pour tes tests ? IE j'imagine ? Parce que IE7 ne gère pas ce sélecteur CSS de manière correcte pour commencer (cf. ici).

Après la solution que je préconise, assez naïve, est d'affecter une classe aux <td> qui doivent être stylées. Simple et efficace.

Lien vers le commentaire
Partager sur d’autres sites

Archivé

Ce sujet est désormais archivé et ne peut plus recevoir de nouvelles réponses.

×
×
  • Créer...