Aplicar estilo solo al primer nivel de etiquetas td

Question

¿Hay alguna manera 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 manera 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 directo-secundario " > " no funciona en IE6. Si necesita admitir ese navegador (lo que probablemente haga, por desgracia), todo lo que puede hacer es seleccionar el elemento interno por separado y deseleccionar el estilo:

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

---

^* Tenga en cuenta que el primer ejemplo hace referencia a un elemento tbody que no se encuentra en su HTML. debería haber estado en su HTML, pero los navegadores generalmente están bien al dejarlo fuera ... solo lo agregan entre bambalinas.

Answer 2

¿qué tal usar el CSS: pseudo-clase de primer hijo:

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

Answer 3

Este estilo:

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

me da:

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

Sin embargo, usar una clase es probablemente el enfoque correcto aquí.

Answer 4

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

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

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

Answer 5

Quería establecer el ancho de la primera columna de la tabla, y encontré que esto funcionaba (en FF7): la primera columna tiene 50 píxeles de ancho:

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

donde estaba mi marca

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

Answer 6

Creo que funcionará.

.Myclass tr td:first-child{ }

 or 

.Myclass td:first-child { }

Answer 7

Supongo que podrías intentarlo

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

O

body table tr td { color: red; }

donde 'body' es un selector para el padre de tu tabla

Pero es muy probable que las clases sean la forma correcta de ir aquí.