Intercalando cores entre linhas de uma tabela ou lista usando CSS3

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.

9 comentários

Pular para o formulário de comentário

    • Leandro em 14 de junho de 2012 às 19:51
    • Responder

    Muito bom mesmo, amigo. Valeu!

    • Carlos em 3 de novembro de 2012 às 19:54
    • Responder

    Cara, muito bom sua dica. De fato tava batendo a cabeça atoa. Abraços!

    • naotil em 13 de junho de 2013 às 10:43
    • Responder

    não funciona no IE8 :/

    • Santhiago em 8 de outubro de 2013 às 20:23
    • Responder

    IE 9 tbm não

    • Paulo Santos em 7 de setembro de 2016 às 22:11
    • Responder

    utilizando esse código no css deu certo sim, quero agora mudar a cor da linha quando passar o mouse sobre ela, como fazer ?

  1. Descobri como mudar a linha com o passar do mouse:

    .tabela tr:hover:nth-child(odd){
    background-color:#bbb;
    }

    obrigado.

      • Francisco Júnior em 27 de maio de 2017 às 13:21
      • Responder

      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.

  2. 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”);
    }

    });

  3. Existe alguma maneira de deixar somente a primeira linha como uma cor diferente?

Deixe uma dúvida, resposta ou sugestão