CSS表格单元格边框重叠表格边框

Question

我不是css的专家,所以这有点令人沮丧.我有一个充满转发器的网格.我希望每行在底部有一个1px边框,以便在视觉上分隔行.我还希望桌子两边都有深灰色边框.使用此表的以下CSS:

        #repeaterTable
        {
            border-left: 1px solid #A3A3A3; 
            border-right: 1px solid #A3A3A3;
            border-collapse: collapse;
        }
        repeaterTable.td
        {
            border-bottom: 1px solid white; 

        }

我在FF(表右边缘的SS)中得到这个结果:

alt text http://img251.imageshack.us/img251/9278/borderff.png

这在IE8中:

alt text http://img412.imageshack.us/img412/7092/borderie.png

我需要的是让深灰色边框保持稳定,而不是每个行边界打破.该表中有两列,但cellspacing为0px,因此设置tr上的border-bottom会形成一个连续的边框.任何人都可以建议对css进行一些更改以使其正常工作吗？

Answer 1

试试这个来获得你想要的效果:

#repeaterTable
{
    border-left: 1px solid #A3A3A3; 
    border-right: 1px solid #A3A3A3;
    border-collapse:collapse;
    border-spacing:0px;
    background-color:#ccc;
}
#repeaterTable td:first-child 
{             
    border-left: 1px solid #A3A3A3;  
}
#repeaterTable td:last-child 
{             
    border-right: 1px solid #A3A3A3;  
}
#repeaterTable td
{
    border-bottom: 1px solid white; 
}

在IE8和FF中使用以下标记进行测试(在Chrome/Safari中不起作用:().

<table id="repeaterTable">
 <tr> <td>&nbsp;</td><td>&nbsp;</td> </tr>
 <tr> <td>&nbsp;</td><td>&nbsp;</td> </tr>
 <tr> <td>&nbsp;</td><td>&nbsp;</td> </tr>
 <tr> <td>&nbsp;</td><td>&nbsp;</td> </tr>
</table>