SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Zealot
    Join Date
    Jul 2004
    Location
    england
    Posts
    114
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS to format only the first row in a table?

    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.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,797
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    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>

  3. #3
    SitePoint Zealot
    Join Date
    Jul 2004
    Location
    england
    Posts
    114
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •