Snippets > jQuery > Alternate row styles

Preview

Country	Points
Germany	10
Italy	20
Lichtenstein	11
Sweden	12

HTML

<div class="demo-container">
<table width="100%" border="0" cellspacing="1" cellpadding="4" id="demo-table">
<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;
}

$(document).ready(function() {
$(".demo-container tr:even").addClass("demo-even");
$(".demo-container tr:odd").addClass("demo-odd");
});