Question

怎么做？我希望在表格中的行的顶部和底部边框上有不同的颜色。如果我使用display: block，Chrome会将其设置为正确，但我不知道这是否是正确的方法。但是，我希望它在IE8中工作，我不知道如何。

我准备了一个适用于Chrome的小提琴：http://jsfiddle.net/s6LQ7/

Answer 1

适用于Firefox和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 */
}

以上使用标准HTML显示系统，以便它可以在IE8上运行。我有：

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

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

Answer 2

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

表格行的顶部和底部边框

2 个答案: