Aplicar estilo solo al primer nivel de las etiquetas td

Question

¿Hay alguna forma de aplicar un estilo de Clase a solo UN nivel de etiquetas 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

¿Hay alguna forma de aplicar un estilo de Clase a solo UN nivel de etiquetas td?

Sí ^*:

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

Pero! El selector de hijo directo '>' no funciona en IE6. Si tiene que apoyar ese navegador (que es probable que sí, por desgracia), todo lo que puede hacer es seleccionar el elemento interior por separado y no-establecer el estilo:

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

---

^* Tenga en cuenta que la primera ejemplo hace referencia a un elemento tbody no encontrado en su HTML. Es debería haber en su HTML, pero los navegadores generalmente están bien al dejarlo fuera ... simplemente lo agregan detrás de las escenas.

Answer 2

Creo que se puede tratar

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

O

body table tr td { color: red; } 

donde 'cuerpo' es un selector para padres

de su mesa, pero las clases son muy probablemente la manera correcta para ir aquí.

Answer 3

Este estilo:

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

me da:

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

Sin embargo, el uso de una clase es probablemente el enfoque aquí.

Answer 4

Simplemente haga un selector para las tablas dentro de un MyClass.

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

(Para genéricamente se aplican a todas las tablas internas, también se puede hacer table table td.)

Answer 5

cómo sobre el uso del CSS: first-child pseudo-clase:

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

Answer 6

quería establecer el ancho de la primera columna de la tabla, y encontré esto funcionó (en FF7) - la primera columna es 50px de ancho:

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

donde mi margen de beneficio era

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

Answer 7

creo, va a trabajar.

.Myclass tr td:first-child{ } 

or 

.Myclass td:first-child { }