"Table Filter - Alternate table row color using CSS"
Bootstrap 3.3.0 Snippet by creativealex

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
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<a href="http://www.iluquotes.com/a-friend-is-one-of-the-nicest-things" target="_blank"><img src="http://www.iluquotes.com/images/post/a-friend-is-one-of-the-nicest-things-friendship-quote.jpg" alt="A friend is one of the nicest things Friendship Quotes"></a>
<h2></h2>CSS nth-child odd and even property - Alternate table row color using CSS</h2>
By<a href="http://www.iluquotes.com/">www.iluquotes.com</a>
<table class="table package-table">
<tbody>
<tr>
<td colspan="6"><h3>Site Wide Factors</h3></td>
</tr>
<tr>
<td>Number of Key Phrases Optimized</td>
<td>20</td>
<td>40</td>
<td>80</td>
<td>120</td>
<td>200</td>
</tr>
<tr>
<td>Preliminary SEO Check</td>
<td><span class="glyphicon glyphicon glyphicon-ok ok-cross"></span></td>
<td><span class="glyphicon glyphicon glyphicon-ok ok-cross"></span></td>
<td><span class="glyphicon glyphicon glyphicon-ok ok-cross"></span></td>
<td><span class="glyphicon glyphicon glyphicon-ok ok-cross"></span></td>
<td><span class="glyphicon glyphicon glyphicon-ok ok-cross"></span></td>
</tr>
<tr>
<td>Detailed SEO Strategy and Plan</td>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
.package-table tbody tr:nth-child(odd){background:#FAFAFA;}
.package-table td{border-top:0px !important; border-right:1px solid #fff !important;}
.package-table tbody tr:nth-child(even){background:#DFDFDF; }
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: