Почему строка заголовка не показывает границы в моей таблице HTML?

Question

У меня есть следующий код CSS для моей таблицы HTML, но по какой-то причине граница не пересекает строку заголовка (<th>). Это определенно что-то простое, что я упустил, но я не могу понять это.

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

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

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

Я использую jQuery , чтобы добавить эти нечетные четные чередования.

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

Answer 1

Чтобы уточнить ответ Superstringcheese:

Некоторые браузеры (IE, ahem) ведут себя странно, когда вы пытаетесь стилизовать вещи на основе <tr> s, так как концептуально они просто элементы для хранения <td> s и <th> s. Итак, вы хотите изменить свой CSS следующим образом:

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

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

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

И ваш код JQuery к этому:

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

Answer 2

Не добавляйте стили в TR, добавляйте их в TD. Итак:

tr.odd td {background:000;}