Question

我的HTML表格有以下CSS代码，但由于某种原因，边框不会超过标题行（<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

不要将样式添加到TR，将其添加到TD。所以：

tr.odd td {background:000;}

Answer 2

详细说明Superstringcheese的答案：

当您尝试根据<tr>设置内容时，某些浏览器（IE，ahem）表现得很奇怪，因为从概念上讲，它们只是保存<td>和<th>的元素。所以，你想把你的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');

为什么标题行没有在我的HTML表格上显示边框？

2 个答案: