Zebra Tables com CSS3
Postado por: Pedro Rogério emPouco 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.
Sobre Pedro Rogério
Pedro Rogério é desenvolvedor web por paixão, não saberia fazer melhor outra coisa. Além de escrever para o Pinceladas da Web também escreve para o CSS no Lanche, blog voltado ao desenvolvimento front-end.
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!
Falo e disse Joabe, com essas novas funcionalidades o nosso trabalho ficará mais rápido e melhor.
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.
@Leonardo,
Desculpe, foi um erro de digitação que eu nem havia reparado, mas agora está Ok. Obrigado.
Pedro Rogério,
De nada! Obrigado a você pelas informações, sempre de primeira qualidade.
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.
Enquanto os browsers não rodarem o CSS3 nativamente, vou usando o MoreCSS.js para fazer os zebrados.:D