Aplicar estilo apenas ao primeiro nível de tags td

136

Existe uma maneira de aplicar o estilo de uma classe a apenas UM nível de tags 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>

css css-selectors

— RichC
fonte

221

Existe uma maneira de aplicar o estilo de uma classe a apenas UM nível de tags td?

Sim ^* :

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

Mas! O >seletor de filhos diretos ' ' não funciona no IE6. Se você precisar oferecer suporte a esse navegador (o que provavelmente faz, infelizmente), tudo o que você pode fazer é selecionar o elemento interno separadamente e desabilitar o estilo:

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

^* Observe que o primeiro exemplo faz referência a um tbodyelemento não encontrado no seu HTML. Ele deveria estar no seu HTML, mas os navegadores geralmente não concordam em deixá-lo de fora ... eles apenas o adicionam nos bastidores.

— bobince
fonte

1

Estremeço ao lembrar de um mundo em que tivemos que depurar para o IE6. Este post trouxe de volta calafrios ..

— webfish

35

Que tal usar o CSS: pseudo classe de primeiro filho:

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

— aviko oloo
fonte

16

Isso não vai funcionar. Isso seleciona todos os tdfilhos na árvore filhos dos .MyClassquais são os primeiros do elemento que os contém e, assim, também estilizarão o interior td.

— Lazlo

1

como isso tem tantos votos positivos? :first-childdefinitivamente não terá o efeito que o OP está procurando.

— usar o seguinte código

8

Esse estilo:

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

me dá:

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

No entanto, usar uma classe é provavelmente a abordagem correta aqui.

— Nick Presta
fonte

Usar uma classe em cada elemento td pode ser um pouco redundante, você provavelmente usaria uma classe no elemento de tabela que o continha e ainda assim teria que excluir o segundo nível de tabelas - ou seja, seu primeiro exemplo está correto.

— thomasrutter

6

Basta fazer um seletor para tabelas dentro de um MyClass.

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

(Para aplicar genericamente a todas as tabelas internas, você também pode fazê-lo table table td.)

— Mandril
fonte

3

Eu queria definir a largura da primeira coluna da tabela e achei que funcionou (no FF7) - a primeira coluna tem 50 px de largura:

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

onde estava minha marcação

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

— prule
fonte

3

Eu acho que vai funcionar.

.Myclass tr td:first-child{ }

 or 

.Myclass td:first-child { }

— uma
fonte

O primeiro seleciona o primeiro tdde cada linha e o segundo seleciona apenas o primeiro tdda página?

— Joshua Pinter

@ JoshuaPinter, você está basicamente correto sobre o primeiro. Em geral, td:first-childseleciona qualquer tdelemento que seja o primeiro elemento em seu pai (não importa qual seja seu pai). O primeiro tr td:first-childadiciona a condição de que tdtambém deve ser aninhado abaixo de a tr(em qualquer nível, não necessariamente descendente direto). tr > td:first-childseleciona a tdque é o primeiro elemento diretamente em a tr. Portanto, em última análise :first-child, nada tem a ver com uma solução para a pergunta do OP e essa resposta está incorreta.

— usar o seguinte comando

2

Eu acho que você poderia tentar

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

Ou

body table tr td { color: red; }

onde 'body' é um seletor para o pai da sua tabela

Mas as aulas provavelmente são o caminho certo a seguir.

— Simon Buchan
fonte