web-dev-qa-db-fra.com

Appliquer le style uniquement au premier niveau de tags td

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>
csscss-selectors
124
RichC

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 '> _ 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é-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 élément tbody non trouvé dans votre code HTML. Il devrait avoir été dans votre code HTML, mais les navigateurs acceptent généralement de le laisser de côté ... ils l'ajoutent simplement dans les coulisses.

205
bobince

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

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

Ce style:

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

donne moi:

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

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

8
Nick Presta

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.)

6
Chuck

Je pense que cela va fonctionner.

.Myclass tr td:first-child{ }

 or 

.Myclass td:first-child { }
3
uma

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>
3
prule

Je suppose que tu pourrais 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.

2
Simon Buchan