<html>
<head>
<style>
caption
{
text-align: center;
}
tr:nth-child(4n+1):not(:first-child),
tr:nth-child(4n) {
background:
#EAEAEA;
}
tr:nth-child(4n-1),
tr:nth-child(4n-2) {
background:
#E7F2FC;
}
</style>
</head>
<body
topmargin=0 leftmargin=0>
<table >
<caption><b><br>HEADER</b></caption>
<tr>
<td
height="21"><b>column 1</b></td>
<td
height="21"><b>column 2</b></td>
<td
height="21"><b>column 3</b></td>
<td
height="21"><b>column 4</b></td>
</tr>
<tr>
<td>row
1.1</td>
<td>row
1.2</td>
<td>row
1.3</td>
<td>row
1.4</td>
</tr>
<tr>
<td
colspan="4">row 2</td>
</tr>
<tr>
<td>row
3.1</td>
<td>row
4.2</td>
<td>row
4.3</td>
<td>row
4.4</td>
</tr>
<tr>
<td
colspan="4">row 4</td>
</tr>
<tr>
<td>row
5.1</td>
<td>row
5.2</td>
<td>row
5.3</td>
<td>row
5.4</td>
</tr>
<tr>
<td
colspan="4">row 6</td>
</tr>
</table>
</body>
</html>
|
Wednesday
CSS table row coloring >> tr:nth-child get 2nd, 3rd, 6th and 7th children at once?
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment