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

Question

我算不上 CSS 专家，所以这有点令人沮丧。我有一个装满中继器的网格。我希望每一行的底部都有一个 1px 的边框，以便在视觉上分隔行。我还想要在 table 的每一侧都有一个深灰色的边框。使用此表的以下 CSS:

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

        }

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

在 IE8 中是这样的:

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

我需要的是让深灰色边框保持实心，而不是为每一行边框打断。该表中有两列，但单元格间距为 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>