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.