表格行的顶部和底部边框

Question

这该怎么做？我希望在表格中的行的顶部和底部边框上有不同的颜色.如果我使用Chrome,Chrome会将其设置为正确display: block,但我不知道这是否是正确的方法.但是,我希望它在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/