Appliquer le style uniquement au premier niveau de tags td

Question

Existe-t-il un moyen d'appliquer le style d'une classe à UN seul niveau de balises td?

<style>.MyClass td {border: solid 1px red;}</style>

<table class="MyClass">
  <tr>
    <td>
      THIS SHOULD HAVE RED BORDERS
    </td>
    <td>
      THIS SHOULD HAVE RED BORDERS
      <table><tr><td>THIS SHOULD NOT HAVE ANY</td></tr></table>
    </td>
  </tr>
</table>

Answer 1

  

Existe-t-il un moyen d'appliquer le style d'une classe à UN seul niveau de balises td?

Oui ^* :

.MyClass>tbody>tr>td { border: solid 1px red; }

Mais! Le sélecteur enfant direct « > » ne fonctionne pas dans IE6. Si vous devez prendre en charge ce navigateur (ce que vous faites probablement, hélas), tout ce que vous pouvez faire est de sélectionner l'élément interne séparément et de désélectionner le style:

.MyClass td { border: solid 1px red; }
.MyClass td td { border: none; }

^* Notez que le premier exemple fait référence à un élément tbody non trouvé dans votre code HTML. Il aurait dû figurer dans votre code HTML, mais les navigateurs acceptent généralement de le laisser de côté… ils l'ajoutent simplement dans les coulisses.

Answer 2

comment utiliser le CSS: pseudo-classe first-child:

.MyClass td:first-child { border: solid 1px red; }

Answer 3

Ce style:

table tr td { border: 1px solid red; }
td table tr td { border: none; }

me donne:

cette http://img12.imageshack.us/img12/4477/borders.png

Cependant, utiliser une classe est probablement la bonne approche ici.

Answer 4

Créez simplement un sélecteur de tables dans une MyClass.

.MyClass td {border: solid 1px red;}
.MyClass table td {border: none}

(Pour appliquer de manière générique à toutes les tables internes, vous pouvez également utiliser la table table td .)

Answer 5

Je voulais définir la largeur de la première colonne du tableau et j'ai trouvé que cela fonctionnait (en FF7) - la première colonne mesure 50 pixels de large:

#MyTable>thead>tr>th:first-child { width:50px;}

où mon marquage était

<table id="MyTable">
 <thead>
  <tr>
   <th scope="col">Col1</th>
   <th scope="col">Col2</th>
  </tr>
 </thead>
 <tbody>
   ...
 </tbody>
</table>

Answer 6

Je pense que ça va marcher.

.Myclass tr td:first-child{ }

 or 

.Myclass td:first-child { }

Answer 7

Je suppose que vous pourriez essayer

table tr td { color: red; }
table tr td table tr td { color: black; }

Ou

body table tr td { color: red; }

où 'body' est un sélecteur pour le parent de votre table

Mais les cours sont probablement la bonne voie à suivre ici.