title: Double dotted border while using colspan
body: <p>I have what seems like a simple problem, but searching the net hasn't yielded any results.</p>
  
  <p>I have a table</p>
  
  <pre><code>&lt;table&gt;
      &lt;tr&gt;
          &lt;td colspan="3"&gt;
              &lt;img src="something.png" /&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;
              Hello
          &lt;/td&gt;
          &lt;td&gt;
              World
          &lt;/td&gt;
          &lt;td&gt;
              !
          &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>The <code>&lt;tr&gt;</code> elements all have <code>border-top: dotted 1px black</code>, this works fine apart from the central <code>&lt;td&gt;</code> element in the second <code>&lt;tr&gt;</code>.</p>
  
  <p>This element has a double border and so appears as a solid line, removing the <code>colspan</code> fixes the issue. </p>
  
  <p>I have tried applying <code>border-collapse: collapse</code> to the the table and this hasn't worked, I have tried adding content in the form of <code>&amp;nbsp;</code> inside the first <code>&lt;td&gt;</code> instead of an image and this hasn't worked either.</p>
  
  <p>Any ideas anyone?</p>