Hi
I want to have a table, the usual, <th> used for headers, and then <td> for the rest.
However, I want to apply a formatting rule only to the first row of data under the header row.
I could add class=“first” but that’s a bit of a hassle.
Is there a way using child selectors and decendants to come up with a more elegant way to do it from the CSS?
I’m not really too sure on child selectors etc, so I’d be grateful for any help!!
Oh, and ideally - for it to work in all browsers
Thanks for any ideas you have.
PaulOB
2
Assuming you have a table structure like below then you could use :first-child for ie7 upwards (won’t work in ie6).
e.g.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.test tr:first-child td{background:red}
</style>
</head>
<body>
<table class="test" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th scope="col">Header</th>
<th scope="col">Header</th>
<th scope="col">Header</th>
</tr>
</thead>
<tbody>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
</tbody>
</table>
</body>
</html>
Perfect! Thanks!
I think getting a solution to work in IE6 was a bit of a longshot, but this is exactly what I need.
Thanks for your help