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