CSS Border problem on colspan TD

Question

Hey guys I have a CSS problem regarding borders, the problem is adding borders around a td that has a colspan. The table has properties:

<table cellspacing=0 cellpadding=0 border=0>

The CSS style:

.tdclass{
    background-color:#FDBCC1;
}

.tdclass td{
    border-top: 3px solid white;
}

The way it works is like this:

<tr class = "tdclass">
<td> ...
<td colspan="2"> ...
<td> ...
</tr>

What this CSS does is highlights certain rows and adds a white line that acts as a fake row spacing. Adding borders to the <tr> element does not work, only works on <td>.

Now this works fine on all the cells, except on the cell with the "colspan". The problem is that it generates the border BUT it is not white, it is the same color as the cell background which is defiend in ".tdclass". This problem seems to happen only on the "colspan" <td> element. So the effect looks as if the cell has shifted up from the row:

It likes this:

____-----____

Where that little bump is the <td> with "colspan" in. It looks like bump because all other cells generate a white border while that generates a border that has the same color as the .tdclass "background-color".

Any reason why? Is there a fix to this?

Answer 1

Is there any content in your td with the colspan?

IE, Firefox, and Chrome render the following in three different ways:

<tr class = "tdclass">
 <td> blah</td>
 <td colspan="2"> </td>
 <td> blah</td>
</tr>

Chrome does what you expect. Firefox does what you describe. IE leaves off the border and does not extend the background color.

Try inserting a   in your empty cells.