我的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');
最佳答案
要详细说明Superstringcheese的答案:
当您尝试基于<tr>
设置样式时,某些浏览器(即IE)会表现出奇怪的效果,因为从概念上讲,它们只是保存<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');