Efeito de zebra na tag TR de uma tabela utilizando somente CSS

Um efeito que precisei achar que é bem fácil de ser feito e que pode dar uma melhorada da UI de uma aplicação é o efeito de "zebra" em uma TR utilizando somente CSS.



Para fazer este efeito na sua tabela, basta colocar o código abaixo e alterar o valor de background para o valor que desejar.

 tr:nth-child(even){  
      background: #CFCDCD;  
 };  

Que faz o efeito demonstrado na figura ou também pode baixar o exemplo completo la no meu GitHub ou acessando diretamente http://andrebetiolo.github.io/demos/efeitoZebraTr/.

Fonte: w3schools

Comentários

Postagens mais visitadas deste blog

Teclas de atalho(accesskey) no HTML5

Utilizando o Gulp para facilitar seu desenvolvimento front-end

Lazy load no Angular using Jquery