表格行的上边框和下边框

Question

该怎么做呢？我想在表格中的行的上边框和下边框上使用不同的颜色。如果我使用display: block，Chrome将会正确地渲染它，但我不知道这是否是正确的方法。但是，我想让它在IE8中工作，我不知道怎么做。

我准备了一个可以在Chrome中使用的小提琴：http://jsfiddle.net/s6LQ7/

Answer 1

这可以在火狐和IE8上运行：

table {
    width: 100%;
    border-collapse: separate; /* Not really necessary unless you use normalize.js */
    border-spacing: 0px; /* take out spaces between cells */
}

tr {
    background-color: #ccc;
}

td {
    width: 50%;
    border-top: 1px solid #f00; 
    border-bottom: 1px solid #0f0; /* move spacing to the cell */
}

上面的代码使用标准的超文本标记语言显示系统，因此它可以在IE8上运行。我有：

• 将border-collapse设置为separate，以防止表格折叠边框，因此它绘制每个边框
• Added border-spacing set to 0px以删除单元格之间的间距
• 删除display指令，允许表格显示为表格
• 将border指令移动到单元格，而不是移动到行。

http://jsfiddle.net/s6LQ7/1/

Answer 2

您是否尝试过在单元格而不是行上放置边框？另外，大多数css规则不会应用于表单元格，除非您使用类作为选择器。