Question

I have the following CSS code for my HTML table, but for some reason the border doesn’t go over the header row (the <th>). It’s definitely something simple that I missing, but I can’t seem to figure it out.

#dependenciesTable tr.odd {
    background-color: #ffffff;
}

#dependenciesTable tr.even {
    background-color: #CDE0F6;
}

#dependenciesTable
{
    border-collapse:collapse;
    border-width: 1px;
    border-style: solid;
}

I am using jQuery to add these odd even striping.

$('#dependenciesTable tr:odd').addClass('odd');
$('#dependenciesTable tr:even').addClass('even');

Answer 1

To elaborate on Superstringcheese’s answer:

Some browsers (IE, ahem) behave strangely when you try to style things based on <tr>s, since conceptually they’re just elements to hold <td>s and <th>s. So, you want to change your CSS to this:

#dependenciesTable td.odd {
    background-color: #ffffff;
}

#dependenciesTable td.even {
    background-color: #CDE0F6;
}

#dependenciesTable 
{
    border-collapse:collapse;
    border-width: 1px;
    border-style: solid;
}

And your jQuery code to this:

$('#dependenciesTable tr:odd td').addClass('odd');
$('#dependenciesTable tr:even td').addClass('even');