Fóruns sobre PHP, JavaScript, HTML, MySQLi, jQuery, Banco de Dados, CSS


Moderador: web

 
Avatar do usuário
ADMIN
ADMIN
Tópico Autor
Mensagens: 17680
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Tabela zebrada ou tabela com cores alternada com hover CSS

08-03-2016 04:01

Nesse post vou deixar um script para fazer uma tabela zebrada com linhas usando cores alternadas, onde cada linha da tabela tem uma cor diferente, alternando entre duas cores.

A tabela também tem o efeito hover onde ao passar o cursor sobre a linha toda ela troca de cor.
O hover funciona sem uso de classe no td. O hover é criado com o uso do nth-child odd e even.

<style type="text/css"> .tabela{ width:100%; } /* cor 1 */ .tabela tr:nth-child(odd){ background-color:#ccc; } .tabela tr:hover:nth-child(odd){ background-color:#bbb; } /* cor 1 */ /* cor 2 */ .tabela tr:nth-child(even){ background-color:#ddd; } .tabela tr:hover:nth-child(even){ background-color:#eee; } /* cor 2 */ </style> <table class="tabela"> <tr> <td>um</td> <td>dois</td> </tr> <tr> <td>um</td> <td>dois</td> </tr> <tr> <td>um</td> <td>dois</td> </tr> <tr> <td>um</td> <td>dois</td> </tr> </table>

0
A melhor hospedagem para o seu site HostGator!

Quem está online

Usuários navegando neste fórum: Nenhum usuário registrado