Olá pessoal, hoje trago algo que eu vejo que muitos procuram que é como alternar as cores de tabelas, ou seja uma de uma cor outra de outra cor..
Vejam o efeito:
http://jsbin.com/misebiye/1
Fazemos isso dessa maneira:
Primeiro fazemos nossa tabela com HTML
E aplicamos o CSS
Usamos o atributo :nth-child() para fazer o efeito..
Você pode ler mais a respeito deste atributo aqui.
Mas caso apenas queira usar o efeito, você pode apenas alterar as cores dessas linhas:
E essa é minha dica de hoje, espero que gostem
Vejam o efeito:
http://jsbin.com/misebiye/1
Fazemos isso dessa maneira:
Primeiro fazemos nossa tabela com HTML
- Código:
<table class="myTable">
<tr>
<td>Linha 1</td>
</tr>
<tr>
<td>Linha 2</td>
</tr>
<tr>
<td>Linha 3</td>
</tr>
<tr>
<td>Linha 4</td>
</tr>
<tr>
<td>Linha 5</td>
</tr>
</table>
E aplicamos o CSS
- Código:
.myTable{
width:100%;
border-collapse:collapse;
font: 10px 'Verdana', Arial, sans-serif;
color: #999;
}
.myTable td {
padding:8px;
border:#999 1px solid;
}
.myTable tr:nth-child(even) {
background: #e9e9e9;
}
.myTable tr:nth-child(odd) {
background: #f9f9f9;
}
Usamos o atributo :nth-child() para fazer o efeito..
Você pode ler mais a respeito deste atributo aqui.
Mas caso apenas queira usar o efeito, você pode apenas alterar as cores dessas linhas:
- Código:
.myTable tr:nth-child(even) {
background: #e9e9e9;
}
.myTable tr:nth-child(odd) {
background: #f9f9f9;
}
E essa é minha dica de hoje, espero que gostem