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

我需要的是让深灰色边框保持稳定，而不是每个行边界都打破。该表中有两列，但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>

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 /等）不支持，因此在那里看起来不对。取决于你想要的兼容性。所以我使用了“最后”类。

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

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

2 个答案: