Alternating Table Color Rows in CSS

These 2 techniques can be used for alternating row-colors in a table.


                                          <
style type="
text/css"
>
/* technique 1 */
tbody tr:nth-child(odd) {
    background-color: #ccc;
}
/* technique 2 */
TBODY TR.odd {
    background-color: #78a5d1;
}
<
/style>
<
table>
<
tbody>
<
tr>
<
td>
Row1<
/td>
<
td>
Lorem ipsum dolor sit amet, 
consectetur adipiscing elit.<
/td>
<
/tr>
<
tr>
<
td>
Row2<
/td>
<
td>
Lorem ipsum dolor sit amet, 
consectetur adipiscing elit.<
/td>
<
/tr>
<
tr>
<
td>
Row3<
/td>
<
td>
Lorem ipsum dolor sit amet, 
consectetur adipiscing elit.<
/td>
<
/tr>
<
tr>
<
td>
Row4<
/td>
<
td>
Lorem ipsum dolor sit amet, 
consectetur adipiscing elit.<
/td>
<
/tr>
<
tr>
<
td>
Row5<
/td>
<
td>
Lorem ipsum dolor sit amet, 
consectetur adipiscing elit.<
/td>
<
/tr>
<
/tbody>
<
/table>
<
table>
<
tbody>
<
tr class="
odd"
>
<
td>
Row1<
/td>
<
td>
Lorem ipsum dolor sit amet, 
consectetur adipiscing elit.<
/td>
<
/tr>
<
tr>
<
td>
Row2<
/td>
<
td>
Lorem ipsum dolor sit amet, 
consectetur adipiscing elit.<
/td>
<
/tr>
<
tr class="
odd"
>
<
td>
Row3<
/td>
<
td>
Lorem ipsum dolor sit amet, 
consectetur adipiscing elit.<
/td>
<
/tr>
<
tr>
<
td>
Row4<
/td>
<
td>
Lorem ipsum dolor sit amet, 
consectetur adipiscing elit.<
/td>
<
/tr>
<
tr class="
odd"
>
<
td>
Row5<
/td>
<
td>
Lorem ipsum dolor sit amet, 
consectetur adipiscing elit.<
/td>
<
/tr>
<
/tbody>
<
/table>

Favorite0