Applicare lo stile solo al primo livello dei 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

C'è un modo per applicare uno stile di classe a un solo livello di tag td?

Sì ^*:

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

Ma! Il selettore di figlio diretto ">" non funziona in IE6. Se è necessario supportare che il browser (che probabilmente si fa, ahimè), tutto quello che puoi fare è selezionare l'elemento interno separatamente e ONU-impostare lo stile:

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

---

^* Nota che la prima esempio fa riferimento a un elemento tbody non trovato nel codice HTML. Lo dovrebbe essere nel tuo codice HTML, ma i browser sono generalmente ok a lasciarlo fuori ... lo aggiungono semplicemente dietro le quinte.

Answer 2

Credo che si potrebbe provare

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

O

body table tr td { color: red; } 

in cui 'corpo' è un selettore per il genitore della vostra tabella

Ma le classi sono molto probabilmente il modo giusto per andare qui.

Answer 3

Questo stile:

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

mi da:

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

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

Answer 4

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

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

(genericamente si applicano a tutti i tavoli interni, si potrebbe anche fare table table td.)

Answer 5

come circa usando il CSS: first-child pseudo-classe:

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

Answer 6

volevo imposta la larghezza della prima colonna della tabella e ho trovato funzionato (in FF7) - la prima colonna è larga 50px:

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

dove il mio margine di profitto è stato

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

Answer 7

credo, funzionerà.

.Myclass tr td:first-child{ } 

or 

.Myclass td:first-child { }