Intercalar as cores de um uma tabela ou lista está muito presente no dia a dia de um programador ou webdesigner. Se você é desenvolvedor web, sabe bem do que estou falando.
Já vi muitos programadores escrevem códigos PHP ou ASP para produzir esse efeito de zebra, já vi tambem alguns webdesigners usam CSS + JavaScript para isso. Mas, graças ao CSS3, isso se tornou possível usando apenas duas linhas de código CSS.
tr:nth-child(even) {background: #FFF} tr:nth-child(odd) {background: #EEE}
onde “even” corresponde às linhas pares e “odd” às linhas impáres.
esse pequeno bloco de código pode tambem ser usado em conjunto com vários outros componentes HTML ou em classes CSS. Veja um exemplo do uso em Listas.
li:nth-child(even) {background: #FFF} li:nth-child(odd) {background: #EEE}
Agora, veja um exemplo do uso do zebrado anexado a uma classe css feita para formatar uma tabela.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <style type="text/css"> /*css global tabela*/ .full_table_list{width: 200px;border-collapse: collapse;} /*colocando bordas nas linhas*/ .full_table_list tr{border:1px black solid;} /*Definido cor das linhas pares*/ .full_table_list tr:nth-child(even) {background: #FFF} /*Definindo cor das Linhas impáres*/ .full_table_list tr:nth-child(odd) {background: #EEE} </style> </head> <body> <table class="full_table_list"> <tr> <td> Linha 1 </td> </tr> <tr> <td> Linha 2 </td> </tr> <tr> <td> Linha 3 </td> </tr> <tr> <td> Linha 4 </td> </tr> </table> </body> </html>
Isso reproduziu o efeito mostrado na imagem abaixo.
Eu não sou nenhum especialista em CSS, mas se houver alguma dúvida relacionado ao assunto do post, usem a área de perguntas e respostas abaixo.
10 comentários
Pular para o formulário de comentário
Muito bom mesmo, amigo. Valeu!
Cara, muito bom sua dica. De fato tava batendo a cabeça atoa. Abraços!
não funciona no IE8 :/
IE 9 tbm não
utilizando esse código no css deu certo sim, quero agora mudar a cor da linha quando passar o mouse sobre ela, como fazer ?
Descobri como mudar a linha com o passar do mouse:
.tabela tr:hover:nth-child(odd){
background-color:#bbb;
}
obrigado.
Paulo, você nem precisa repetir toda a linha para fazer a mudança do background, basta aplicar a cor à tag tr, como abaixo (por exemplo):
tr:hover{background-color: #000; color: #fff;}
Abraços.
Para a questão do Internet explorer você pode fazer também:
$(document).ready(function() {
if ( $.browser.msie ) {
$(“.historyLog tr:even”).css(“background-color”, “#EEE”);
$(“.historyLog tr:odd”).css(“background-color”, “#FFF”);
}
});
Existe alguma maneira de deixar somente a primeira linha como uma cor diferente?
Parabéns pelo artigo. E obrigado. Me ajudou muito