for a html table, is there a way to have striped rows as well as a seperate color for the first column

Question

I have a matrix that i am showing in html table. I have my header row (th) but i am trying to see if there is such things as header column that i can style similar to header row. Right now i am using a class=odd and class=even on my TR in my Tbody so i am not sure if there is a way to have a column overwrite this row css logic.

Answer 1

Given this markup:

<table>
    <thead>
        <tr>
            <th>&nbsp;</th>
            <th>Field 1</th>
            <th>Field 2</th>
        </tr>
    </thead>
    <tbody>
        <tr class="even">
            <th>Row 1</th>
            <td>Cell 1,1</td>
            <td>Cell 2,1</td>
        </tr>
        <tr class="odd">
            <th>Row 2</th>
            <td>Cell 2,1</td>
            <td>Cell 2,2</td>
        </tr>
    </tbody>
</table>

You could use this CSS:

thead th {
    background-color: red;
}
tr.even td {
    background-color: blue;
}
tr.odd td {
    background-color: yellow;
}
tbody tr.odd th, tbody tr.even th {
    background-color: green;
}

See this in action here.

Answer 2

It might seem odd but try the <col> tag, you don't see it very often but I think it's great!

    <table width="100%" border="1">
      <col style="background:red;" align="left" />
      <col align="left" />
      <col align="right" />
      <tr>
        <th>ISBN</th>
        <th>Title</th>
        <th>Price</th>
      </tr>
      <tr>
        <td>3476896</td>
        <td>My first HTML</td>
        <td>$53</td>
      </tr>
    </table>

Of course you'd want to put a class on the <col> tag as opposed to writing the style right in there.

Also I'd combine this with the other folks answers when it comes to the CSS. As for using pseudo classes for even/odd, if you want to retain compatibility with IE6 you'll need to apply the striping with JavaScript, or your application code.

Answer 3

you can target a column using CSS td:first-child or make the header cells th instead of td and differentiate using thead th and tbody th