Alternating Table Color Rows in CSS
Show Plain Text »
Result for 1st technique:
Result for 2nd technique:
- <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. |