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

<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 ----------> <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> <tr> <td>Keywords Analysis Report</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>Competitive Analysis Report</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>Working With HTML Source Code</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>Crawler Compliance Implementation</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>Google XML Site maps</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>Google Analytics Analysis</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 colspan="6"><h3>SEO Compatibility Checks</h3></td> </tr> <tr> <td>Cross Browser Compatibility</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>Website Load Time</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>Checking the Page Size</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>Check the Broken Links</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>Duplicate Content Checking</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>RSS Feeds</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>W3C Validation</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 colspan="6"><h3>On-Page Optimization</h3></td> </tr> <tr> <td>Optimizing Title Tags and Meta Tags</td> <td>Upto 20</td> <td>Upto 40</td> <td>Upto 80</td> <td>Upto 120</td> <td>Upto 200</td> </tr> <tr> <td>Robot.txt Optimization</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>Optimizing Site Directory Structure</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>Image Optimization</td> <td>20</td> <td>As per requirement.</td> <td>As per requirement.</td> <td>As per requirement.</td> <td>As per requirement.</td> </tr> <tr> <td>Anchor Tag Optimization</td> <td>30</td> <td>As per requirement.</td> <td>As per requirement.</td> <td>As per requirement.</td> <td>As per requirement.</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; }

Related: See More


Questions / Comments: