CSS表格单元格边框重叠表格边框 [英] CSS Table cell border overlapping table border

问题描述

我几乎不是CSS方面的专家，所以这有点令人沮丧.我有一个装有中继器的网格.我希望每行底部都有一个1px的边框，以便在视觉上分隔行.我还希望桌子的两边都有深灰色的边框.使用此表的以下CSS:

I'm hardly an expert in css, so this is a bit frustrating. I have a grid that was filled with a repeater. I want each row to have a 1px border along the bottom to visually separate the rows. I also want a dark gray border on each side of the table. With the following CSS for this table:

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

        }

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

I am getting this result in FF (SS of right edge of table):

在IE8中是这样的:

替代文本http://img412.imageshack.us/img412/7092/borderie .png

我需要使深灰色边框保持实心，而不是使每行边框中断.该表中有两列，但是单元格间距为0px，因此在tr上设置border-bottom-bottom可以形成连续的边框.谁能建议对CSS进行一些更改以使其正常工作?

What I need is to have the dark gray border remain solid, instead of break for each row border. The table has two columns in it, but the cellspacing is at 0px so setting the border-bottom on the tr makes a continuous border. Can anyone suggest some changes to the css to get this working?

推荐答案

尝试此操作以获得所需的效果:

Try this to get the effect you want:

#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 :()中不起作用.

Tested with the following markup in IE8 and FF (doesn't work in 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>

这篇关于CSS表格单元格边框重叠表格边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！