Applica lo stile solo al primo livello di tag td

Question

Esiste un modo per applicare uno stile di classe a UN SOLO livello di tag 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

  

Esiste un modo per applicare uno stile di classe a UN SOLO livello di tag td?

Si ^* :

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

Ma! Il & # 8216; > & # 8217; il selettore direct-child non funziona in IE6. Se devi supportare quel browser (cosa che probabilmente fai, ahimè), tutto ciò che puoi fare è selezionare l'elemento interno separatamente e deselezionare lo stile:

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

---

^* Nota che il primo esempio fa riferimento a un elemento tbody non trovato nel tuo HTML. dovrebbe essere stato nel tuo HTML, ma i browser sono generalmente d'accordo nel lasciarlo fuori ... lo aggiungono semplicemente dietro le quinte.

Answer 2

che ne dici di usare il CSS: pseudo-classe del primo figlio:

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

Answer 3

Questo stile:

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

mi dà:

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

Tuttavia, utilizzare una classe è probabilmente l'approccio giusto qui.

Answer 4

Crea un selettore per le tabelle all'interno di una MyClass.

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

(Per applicare genericamente a tutte le tabelle interne, è possibile anche eseguire table table td .)

Answer 5

Volevo impostare la larghezza della prima colonna della tabella e ho trovato che funzionava (in FF7) - la prima colonna è larga 50px:

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

dove era il mio markup

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

Answer 6

Penso che funzionerà.

.Myclass tr td:first-child{ }

 or 

.Myclass td:first-child { }

Answer 7

Suppongo che potresti provare

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

o

body table tr td { color: red; }

dove 'body' è un selettore per il genitore della tua tabella

Ma molto probabilmente le lezioni sono il modo giusto di andare qui.