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

Question

我不是CSS专家，所以有点沮丧。我有一个用repeater填充的网格。我希望每行底部都有一个1像素的边框来视觉上分隔行。我还想在表格的每侧设置深灰色边框。使用以下CSS为此表格：

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

        }

我在火狐浏览器中看到了以下结果(右侧边框的屏幕截图):

而在IE8中则是这样:

图片描述文字 http://img412.imageshack.us/img412/7092/borderie.png

我需要的是深灰色边框保持连续，而不是在每行边框处中断。该表格有两列，但cellspacing为0px，因此在tr上设置border-bottom会形成连续的边框。请问是否有任何建议更改css以使其正常工作？

- Kevin

---

repeaterTable.td 应该改为 #repeaterTable td 吗？ - Joel

确实有帮助，你说得对。现在IE正确地显示它了，但是Firefox仍然有每行边框被覆盖的问题... - Kevin

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>

- Joel

---

您永远不需要在一个没有其他内容的元素中使用 ，绝对不需要。 - reisio

除了在旧浏览器中强制呈现容器样式。 - Joel

Answer 2

使用这个CSS将使IE/Safari/FF/Chrome中的外观符合您的要求。问题在于border-collapse，它导致白色边框延伸到表格边框中。如果您删除它（并重新添加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）不支持，因此在那里看起来会出现错误。这取决于您想要多兼容。所以我使用了“last”类。

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

- Parrots

---

我也会尝试这个选项，以使其更兼容浏览器。谢谢你的帮助！ - Kevin

我知道这个答案现在有点过时了，但是为了其他人的信息，cellpadding和cellspacing在HTML5中不再是有效的HTML。 - hofnarwillie