Ir para conteúdo / Skip to content

Zebra Tables com CSS3

Postado em: 2 de setembro de 2008 por Pedro Rogério

Pouco a pouco os browsers já começam a dar suporte as novas funcionalidades das CSS3, está sendo assim com o Opera.

No artigo eles mostram como utilizar o pseudo-seletor nth-child, onde podemos criar tabelas estilo zebra somente com uma linha de CSS:


tr:nth-child(2n+1) {
    background-color: #99ff99;
}

No seletor devemos indicar o número de linhas em que devemos aplicar o estilo, nesse caso, a cada 2 linhas começando na posição 1 (os valores iniciam com 0). Veja aqui um exemplo.

Isso pode lhe interessar:

Deixe seu comentário

7 comentários para esse post

  1. Joabe disse: 02.09.08 ás 08:16
    #1

    Quanto tempo temos que esperar para começar a trabalhar com isso? Eu vi algumas funcionalidades de html 5 no Opera e já estou com os dedos coçando!

  2. Eduardo Santos disse: 02.09.08 ás 09:55
    #2

    Falo e disse Joabe, com essas novas funcionalidades o nosso trabalho ficará mais rápido e melhor.

  3. Leonardo Antonioli disse: 02.09.08 ás 12:18
    #3

    Olá!
    Mas o pseudo-seletor deve ser “nth-child” e não “nthchild”.
    Eu estou usando. Por enquanto, só vê quem tem Opera. Mas se a lista zebra não é algo imprescindível pro seu design, acho que vale à pena fazê-lo desta forma, dentro dos padrões, sem classes extras.

  4. Pedro Rogério disse: 02.09.08 ás 12:25
    #4

    @Leonardo,

    Desculpe, foi um erro de digitação que eu nem havia reparado, mas agora está Ok. Obrigado.

  5. Leonardo Antonioli disse: 02.09.08 ás 12:47
    #5

    Pedro Rogério,

    De nada! Obrigado a você pelas informações, sempre de primeira qualidade.

  6. Leonardo Antonioli disse: 02.09.08 ás 18:34
    #6

    Mais um comentário: agora tem também o Google Chrome, que, assim como o Opera, visualiza direitinho a tabela zebrada! :-)
    Mas, como disse Diego Eis no Tableless, é uma pena que a gente tenha que nivelar o que faz pelo IE6.

  7. Tiago Celestino disse: 20.09.08 ás 01:04
    #7

    Enquanto os browsers não rodarem o CSS3 nativamente, vou usando o MoreCSS.js para fazer os zebrados.:D

Deixe seu comentário