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

<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> <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> </tbody> </table>
.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; }

Similar snippets: See More


Comments:

comments powered by Disqus