CSS Table cell border overlapping table border

Question

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; 

        }

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

And this in IE8:

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

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?

Answer 1

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; 
}

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>