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

Est-il un moyen pour appliquer une Classe de style à UN seul niveau de balises td?

Oui^*:

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

Mais! Le ‘>' direct-sélecteur d'enfant ne fonctionne pas dans IE6. Si vous avez besoin de soutien que le navigateur (dont vous n'avez probablement, hélas), tout ce que vous pouvez faire est de sélectionner l'intérieur de l'élément séparément et de l'onu-définir le style:

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

---

^*Notez que le premier exemple fait référence à un tbody élément ne trouve pas dans votre code HTML. Il doit avoir été dans votre code HTML, mais les navigateurs sont généralement ok avec les laissant... ils suffit de l'ajouter dans les coulisses.

Answer 2

que diriez-vous d'utiliser la CSS: pseudo-classe premier-enfant:

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

Donne moi:

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

Answer 4

Il suffit de faire 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 faire 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ù était mon balisage

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