DZone Snippets is a public source code repository. Easily build up your personal collection of code snippets, categorize them with tags / keywords, and share them with the world

Chara has posted 50 posts at DZone. View Full User Profile

Alternating Table Color Rows in CSS

02.12.2013
| 8966 views |
  • submit to reddit
<!-- source: http://www.apphp.com/index.php?snippet=css-alternating-table-color-rows -->
<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>

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

Comments

Dan Rios replied on Wed, 2013/02/13 - 1:02am

 http://www.harvestcc.me/