6

Gostaria de saber, como eu faço para zebrar uma tabela HTML? Ela tem duas colunas apenas e as informações são preenchidas dinamicamente proveniente da controller e do BD.

10
  • Ponto de partida => pt.stackoverflow.com/questions/173/…
    – rray
    Commented 7/05/2014 às 17:32
  • 8
    O pnet tem que dar metade do salário p/ o povo do SOpt :)
    – Maniero
    Commented 7/05/2014 às 18:00
  • 1
    bigown, achei que aqui fosse um forum, por isso eu tenho feito vários posts, de tudo aquilo que eu não sei fazer. Mas se caso haja restrição a isso, é só falar que eu paro. Agora, uma vez fiz um comentário tipo esse, sem nada a ver, me censuraram. Ainda bem, bigown, que aqui tem mais pessoas com espírito altruísta que egoísta, isso me faz crer no forum. Aprendi que, se não sabe algo, pergunte, mas não durma com dúvida.
    – pnet
    Commented 7/05/2014 às 18:33
  • 2
    @pnet tire suas dúvidas a vontade, mas o ideal é que você apresente alguma dúvida dentro de algo que você já produziu. Exemplo: "Já tentei isso mas não está como eu quero, o que eu faço para conseguir deixar como eu quero?". Essa pergunta é uma pergunta típica dos SOpt, mostra que você já tentou alguma coisa e está tendo dificuldades em continuar. Por isso existe a possibilidade de fechar perguntas duplicadas aqui, se não teríamos a mesma pergunta feita dezenas de vezes como na maioría dos fóruns. Commented 7/05/2014 às 18:47
  • 3
    pnet Leve na brincadeira o que o @bigown. Num ambiente de trabalho descontraído esta é uma piada comum quando alguém recebe ajuda. ;)
    – utluiz
    Commented 8/05/2014 às 11:44

3 Respostas 3

10

A pseudo-classe nth-child seleciona elementos dentre uma árvore de elementos se referindo a posição específica de cada um. Você pode por exemplo selecionar os elementos ímpares ou pares.

tr:nth-child(2n+2) {
    background: #ccc;
}

O cálculo utilizado pelo nth-child é bastante simples. Você vai usar na maioria das vezes soma. Lembra? A fómula será a seguinte: an+b.

O funcionamento é o seguinte: o browser aplica o estilo a cada 2 tr.

Você pode facilitar, utilizando as palavras odd ou even, para selecionar os elementos ímpares ou pares da árvore.

tr:nth-child(odd) {
    background: #ccc;
}

Se o valor de a (an+b) é igual 0, você não precisa colocar a fórmula, apenas o número referente a ordem do elemento. Exemplo:

table tbody tr:nth-child(1) {
    background: #ccc;
}

fonte: Propriedade do CSS: nth-child
Exemplo funcionando: jsfiddle

Este seletor possui compatibilidade com os seguinte browsers:

Desktop

  • Chrome - 1.0
  • Firefox (Gecko) - 3.5 (1.9.1)
  • Internet Explorer - 9.0
  • Opera - 9.5
  • Safari - 3.1

Mobile

  • Android - 2.1
  • Firefox Mobile (Gecko) - 1.0 (1.9.1)
  • IE Mobile - 9.0
  • Opera Mobile - 9.5
  • Safari Mobile - 3.1
12
  • posta o que tu fez pra poder ver o que aconteceu e poder identificar algum possível erro Commented 7/05/2014 às 19:44
  • De preferência, mas se postar como comentário ainda da pra acompanhar os 'logs' da discução. Commented 7/05/2014 às 19:57
  • Você não precisa deste td, tr:nth-child(2n+2) { background: #ccc; } é suficiente, se vc quiser fazer uma zebra vertical basta trocar o tr por um td e vai ficar assim td:nth-child(2n+2) { background: #ccc; } Commented 7/05/2014 às 20:00
  • Fica assima zebra vertical jsfiddle.net/cG3UK/2 Commented 7/05/2014 às 20:02
  • 1
    Como a pergunta não deixou claro se a solução pode ser especifica para CSS3 acho pertinente adicionar os navegadores que suportam estes seletores.
    – Kazzkiq
    Commented 7/05/2014 às 20:14
4

Você tem algumas opções. Com CSS 3 você pode usar nth-child(even) e nth-child(odd) pra referenciar as linhas ímpares e pares e as celulas dentro dessas linhas. Então você teria o estilo para tr:nth-child(even) e analogamente para o odd. Veja sobre isso aqui.

Outra solução é usando jQuery: você pode usar as construções acima no jQuery pra selecionar os elementos. Basicamente você selecionaria $("table tr:nth-child(even)") e análogo para o odd também.

A solução com CSS 3 é mais interessante (na minha opinião) por manter o estilo do site/app no CSS. O problema é que não vai funcionar em navegadores mais antigos que não tenham suporte ao recurso. Nesses casos, se for um requisito seu suportar navegadores mais antigos a solução com jQuery pode ser mais interessante.

1

Uma Alternativa e utilizar jquery em seu projeto voce pode utilizar dessa forma

function zebrar() {
    $('table th').css('background-color', 'green');
    $('table tbody tr:even').css('background-color', '#efe3e');
    $('table tbody tr:odd').css('background-color', 'silver');
}

simples e prático

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .