Quando temos uma tabela que possui diversas linhas, na maioria das vezes é realmente bem complicado saber em qual linha estamos trabalhando, principalmente se a cor de fundo da linha não muda quando colocamos o mouse em cima dela. Hoje, iremos aprender uma dica fácil, utilizando CSS3, para alterar as linhas de uma tabela.

Antigamente, era meio trabalhoso lidar com esse tipo de situação que tínhamos que alterar a cor da linha por meio de variáveis. Ou, tínhamos que colocar classes ou Id’s nos elementos “tr” da tabela para tal feito acontecer. No entanto, hoje em dia com o CSS3, tudo ficou mais fácil.

Basta algumas poucas linhas de código que o trabalho já estará feito.

Antes de começar, é importante que você tenha um conhecimento breve sobre CSS3, pois se você precisar dar manutenção, ou ajustar algo no código, irá ficar completamente perdido.

Aqui, usaremos o seletor CSS :nth-child(n). Esse seletor busca todo e qualquer elemento que está na nth posição, independente de quem seja o pai ou seu tipo. Usaremos também as keywords odd e even, que irá buscar os elementos cujo índice são “par” ou “impar”.

Vamos ao código?

<style>
table{
	width: 40%;
}
table thead{
	font-weight: bold;
}
tbody tr:nth-child(odd) {
    background-color:rgba(0, 255, 0, .5); 
}
tbody tr:nth-child(even) {
    background-color:rgba(255, 255, 0, .5); 
}
</style>
<table>
<thead>
<tr>
	<td>
		Id
	</td>
<td>
		Nome	
</td>
	<td>
		Email
	</td>
<td>
		Perfil	
</td>
</tr>
</thead>
<tbody>
<tr>
	<td>
		1
	</td>
	<td>
		Thiago Vaini
	</td>
	<td>
		tvaini@gmail.com
	</td>
	<td>
		Usuário
	</td>
</tr>
<tr>
	<td>
		2
	</td>
	<td>
		João Silva
	</td>
	<td>
		jsilva@joao.com.br
	</td>
	<td>
		Usuário
	</td>
</tr>
<tr>
	<td>
		3
	</td>
	<td>
		Felipe Santos
	</td>
	<td>
		fsantos@felipe.com.br
	</td>
	<td>
		Administrador
	</td>
</tr>
<tr>
	<td>
		4
	</td>
	<td>
		Jonas Ramalho
	</td>
	<td>
		jramalho@jramalho.com.br
	</td>
	<td>
		Moderador
	</td>
</tr>
<tr>
	<td>
		5
	</td>
	<td>
		Ana Borges
	</td>
	<td>
		aborges@borges.com
	</td>
	<td>
		Usuário
	</td>
</tr>
</tbody>
</table>

E abaixo eis o resultado

Alternando as cores de uma tabela com CSS3

Resultado final – Alternando as cores de uma tabela com CSS3

Para saber mais sobre o seletor usado e suas keywords, basta acessar http://www.w3schools.com/cssreF/sel_nth-child.asp

Espero que tenham gostado dessa dica rápida! Se algo não funcionar, ou não entenderam direito como que funciona, é só deixar um comentário abaixo.

Posted by Thiago Vaini