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   inside the first <td> instead of an image and this hasn't worked either.

Any ideas anyone?