Efeito zebra em linhas de tabelas com CSS ou JQuery

Que tal dar um efeito zebrado, alternando o colorido das linhas de suas tabelas HTML? Com CSS ou JQuery você pode!

CSS ou jQuery?

Fica a seu critério escolher CSS (preferencialmente) ou JQuery. No exemplo a seguir, optei por criar uma classe .mytab para que o efeito não incida em toda e qualquer tabela, mas somente sobre aquelas que forem designadas. اس صورت میں, você deve especificar sua tabela com class=mytab”. Caso queira afetar todas as tabelas, troque .mytab pela tag table. Feito isto, basta inserir um desses códigos entre as tags HEAD do seu HTML e pronto.

Código usando CSS

1
2
3
4
5
6
7
8
<style type="text/css">
  .mytab tr:nth-child(odd) {
    background-color:#fff;
  }  
  .mytab tr:nth-child(even) {
    background-color:#ccc;
  } 
</style>

Código usando jQuery

1
2
3
4
5
6
7
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
   $('.mytab tr:odd').css('background-color', '#ccc');
   $('.mytab tr:even').css('background-color', '#fff');  
});
</script>

Exemplo

Código completo, em CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<html>
<head>
<title>Zebra</title>
<style type="text/css">
  .mytab tr:nth-child(odd) {
    background-color:#fff;
  }  
  .mytab tr:nth-child(even) {
    background-color:#ccc;
  } 
</style>
</head>
<body>
    <table class="mytab">
      <thead>
        <tr>
          <th>Ordem</th>
          <th>نام</th>
          <th>Idade</th>
          <th>Telefone</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>Maria</td>
          <td>45</td>
          <td>3434-6767</td>
        </tr>
        <tr>
          <td>2</td>
          <td>João</td>
          <td>12</td>
          <td>4545-9009</td>
        </tr>
        <tr>
          <td>3</td>
          <td>Marcos</td>
          <td>33</td>
          <td>9987-7655</td>
        </tr>
        <tr>
          <td>4</td>
          <td>Claudia</td>
          <td>21</td>
          <td>3409-5652</td>
        </tr>
        <tr>
          <td>5</td>
          <td>Juca</td>
          <td>7</td>
          <td>8981-7822</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>
کل مشاہدات: 8865

2 پر تبصرے “Efeito zebra em linhas de tabelas com CSS ou JQuery

جواب چھوڑيں

آپ کا ای میل ایڈریس شائع نہیں کیا جائے گا. مطلوبہ قطعات کے ساتھ نشان لگا دیا گیا ہے *