Alternate table row styles with jQuery and CSS

Country	Points
Germany	10
Italy	20
Lichtenstein	11
Sweden	12

How can you display alternate row styles?

To display alternate table row styles you can use the :even and :odd selectors to target even and odd rows.

HTML

<div class="demo-container">
<table width="100%" border="0" cellspacing="1" cellpadding="4" id="demoTable">
 <tr>
  <th>Country</th>
  <th>Points</th>
 </tr>
 <tr>
  <td>Germany</td>
  <td>10</td>
 </tr>
 <tr>
  <td>Italy</td>
  <td>20</td>
 </tr>
 <tr>
 <td>Lichtenstein</td>
  <td>11</td>
 </tr>
 <tr>
  <td>Sweden</td>
  <td>12</td>
 </tr>
</table>
</div>

CSS

.demo-container {
margin: 0 auto;
max-width: 600px;
padding: 2em;
}

.demo-container table {
border-collapse: separate;
border-spacing: 1px;
border-radius: 6px;
}
.demo-container th,
.demo-container td {
color: #fff;
padding: .25em .5em;
text-align: left;
}
.demo-container th {
background: #3d4c53;
}
.demo-even {
background: #e6772e;
;
}
.demo-odd {
background: #f2af32;
}
.demo-container tr:first-child th:first-child {
-webkit-border-top-left-radius: 6px;
-moz-border-radius-topleft: 6px;
border-top-left-radius: 6px;
}
.demo-container tr:first-child th:last-child {
-webkit-border-top-right-radius: 6px;
-moz-border-radius-topright: 6px;
border-top-right-radius: 6px;
}
.demo-container tr:last-child td:first-child {
-webkit-border-bottom-left-radius: 6px;
-moz-border-radius-bottomleft: 6px;
border-bottom-left-radius: 6px;
}
.demo-container tr:last-child td:last-child {
-webkit-border-bottom-right-radius: 6px;
-moz-border-radius-bottomright: 6px;
border-bottom-right-radius: 6px;
}

JS

<script>
$(function() {
$('#demoTable').each(function() {
$('tr:odd', this).addClass('demo-odd').removeClass('demo-even');
$('tr:even', this).addClass('demo-even').removeClass('demo-odd');
});
});
</script>

jQuery Snippets

Alternate row styles Conditional formatting Copy text to clipboard

LIST OF JQUERY SNIPPETS