Alternating Table Color Rows in CSS

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

[View All Snippets]

<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>

Result for 1st technique:

Row1	Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Row2	Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Row3	Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Row4	Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Row5	Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Result for 2nd technique:

Row1	Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Row2	Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Row3	Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Row4	Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Row5	Lorem ipsum dolor sit amet, consectetur adipiscing elit.