Jake N Jake N - 1 month ago 11
CSS Question

Double dotted border while using colspan

I have what seems like a simple problem, but searching the net hasn't yielded any results.

I have a table

<table>
<tr>
<td colspan="3">
<img src="something.png" />
</td>
</tr>
<tr>
<td>
Hello
</td>
<td>
World
</td>
<td>
!
</td>
</tr>
</table>


The
<tr>
elements all have
border-top: dotted 1px black
, this works fine apart from the central
<td>
element in the second
<tr>
.

This element has a double border and so appears as a solid line, removing the
colspan
fixes the issue.

I have tried applying
border-collapse: collapse
to the the table and this hasn't worked, I have tried adding content in the form of
&nbsp;
inside the first
<td>
instead of an image and this hasn't worked either.

Any ideas anyone?

Answer

Adding border-collapse: separate; to your table fixes the issue, see http://jsfiddle.net/quyMy/

I've added a dynamic test case to that fiddle. Click anywhere, and the visibility of the original/new table will toggle, allowing you to see the difference much easier.

Another way to get rid off the unexpected border is to add a plain <tr></tr> after the row containing <td colspan=3>.

Comments