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）中得到这个结果：

这在 IE8 中：

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

我需要的是让深灰色边框保持实心，而不是为每个行边框中断。该表中有两列，但单元格间距为 0px，因此在 tr 上设置边框底部会形成连续边框。任何人都可以建议对 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>

Answer 2

使用这个 CSS 会让它在 IE/Safari/FF/Chrome 中看起来像您想要的那样。问题是边框折叠，它是导致白色边框继续进入表格边框的原因。如果您删除它（并重新添加 cellpadding="0" 和 cellspacing="0"）并使用此 CSS：

#repeaterTable
{
    border-left: 1px solid #A3A3A3; 
    border-right: 1px solid #A3A3A3;
    background: #CCC;
}
#repeaterTable td
{
    border-bottom: 1px solid white;
}
#repeaterTable td.last
{
    border-bottom: 0px;
}

使用此 HTML：

<table id="repeaterTable" cellpadding="0" cellspacing="0">
<tr><td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td></tr>
<tr><td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td></tr>
<tr><td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td></tr>
<tr><td class="last">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td></tr>
</table>

它会起作用的。

您可以在 CSS 中使用 :last-child，但旧版浏览器 (IE7/etc) 不支持它，因此在那里看起来会出错。取决于你想要的兼容性。所以我使用了“最后一个”类。

或者，您可以将表格包装在具有左右边框的 DIV 中，然后您只需要担心行边框，您可以使用折叠。