CSS to format only the first row in a table?

**spud_nic** · Sep 9, 2009 05:58

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.

**Paul O'B** · Sep 9, 2009 06:47

Assuming you have a table structure like below then you could use :first-child for ie7 upwards (won't work in ie6).

e.g.

Code:

<!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>

**spud_nic** · Sep 9, 2009 07:48

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

User Tag List

Thread: CSS to format only the first row in a table?

Thread Tools

Display

CSS to format only the first row in a table?

Bookmarks

Bookmarks

Posting Permissions