HTML CSS examples for CSS Widget:Table Row
Change table even row background color
<html> <head> <style> table {<!-- www . ja v a 2 s. c om--> border-collapse:collapse; border-spacing:0; width:100%; border:2px solid Chartreuse; } th, td { text-align:center; padding:9px; } tr:nth-child(even) { background-color:yellow; } </style> </head> <body> <div style="overflow-x:auto;"> <table class="table table-bordered table-responsive"> <tbody> <tr> <th colspan="12">Lore</th> </tr> <tr> <th>Lorem ipsu</th> <th>Lorem ips</th> <th>Lorem </th> <th>Lorem </th> <th>Lorem </th> <th>Lorem </th> <th>Lorem </th> <th>Lorem </th> <th>Lorem </th> <th>Lorem </th> <th>Lorem </th> <th>Lorem </th> </tr> <tr> <td>Lore</td> <td>Lorem</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> </tr> <tr> <td>Lor</td> <td>Lorem i</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> </tr> <tr> <td>Lore</td> <td>Lorem i</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> </tr> <tr> <th colspan="12">Lorem </th> </tr> <tr> <th>Lorem ipsu</th> <th>Lorem ips</th> <th>Lorem </th> <th>Lorem </th> <th>Lorem </th> <th>Lorem </th> <th>Lorem </th> <th>Lorem </th> <th>Lorem </th> <th>Lorem </th> <th>Lorem </th> <th>Lorem </th> </tr> <tr> <td>Lore</td> <td>Lorem</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> </tr> <tr> <td>Lor</td> <td>Lorem i</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> </tr> <tr> <td>Lore</td> <td>Lorem i</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> </tr> <tr> <th colspan="12">Lor</th> </tr> <tr> <th>Lorem ipsu</th> <th>Lorem ips</th> <th>Lorem </th> <th>Lorem </th> <th>Lorem </th> <th>Lorem </th> <th>Lorem </th> <th>Lorem </th> <th>Lorem </th> <th>Lorem </th> <th>Lorem </th> <th>Lorem </th> </tr> <tr> <td>Lore</td> <td>Lorem</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> </tr> <tr> <td>Lor</td> <td>Lorem i</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> </tr> <tr> <td>Lore</td> <td>Lorem i</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> <td>Lo</td> </tr> </tbody> </table> </div> </body> </html>