title: Strange behaviour with border-collapse and colspan
body: <p>I am trying to make an organisational chart in HTML. The code is fairly simple, but I have some problems with the rendering in Chrome/Safari and Opera.</p>
  
  <p>Here is what the result should look like, as it works in Firefox and IE:</p>
  
  <p><img src="https://i.stack.imgur.com/eEIOL.png" alt="Desired result, Firefox and IE"></p>
  
  <p>Here is in Chrome and Safari</p>
  
  <p><img src="https://i.stack.imgur.com/NQc9a.png" alt="Chrome and Safari"></p>
  
  <p>And here is in Opera:</p>
  
  <p><img src="https://i.stack.imgur.com/OlLKb.png" alt="Opera"></p>
  
  <p>The problem comes from the <code>border-collapse: collapse</code> property in CSS. If I use the old coding style <code>cellspacing="0" cellpadding="0"</code>it works more or less, but is not valid in HTML5.</p>
  
  <p>I created a jsFiddle to show the problem: <a href="http://jsfiddle.net/aGVp4/7/" rel="nofollow noreferrer">http://jsfiddle.net/aGVp4/7/</a></p>
  
  <p>My HTML:</p>
  
  <pre><code>&lt;table cellspacing="0" cellpadding="0"&gt;
      &lt;tr&gt;
          &lt;td colspan="3"&gt;&lt;/td&gt;
          &lt;td colspan="2" class="case"&gt;&lt;/td&gt;
          &lt;td colspan="3"&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td colspan="3"&gt;&lt;/td&gt;
          &lt;td colspan="2" class="case"&gt;&lt;/td&gt;
          &lt;td colspan="3"&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;&lt;/td&gt;
          &lt;td colspan="3" class="right bottom"&gt;&lt;/td&gt;
          &lt;td colspan="3" class="bottom"&gt;&lt;/td&gt;
          &lt;td&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt; &lt;!-- No colspan here, to make the layout symmetrical --&gt;
          &lt;td class="right"&gt;&lt;/td&gt;
          &lt;td&gt;&lt;/td&gt;
          &lt;td&gt;&lt;/td&gt;
          &lt;td&gt;&lt;/td&gt;
          &lt;td&gt;&lt;/td&gt;
          &lt;td&gt;&lt;/td&gt;
          &lt;td class="right"&gt;&lt;/td&gt;
          &lt;td&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td colspan="2" class="case"&gt;&lt;/td&gt;
          &lt;td colspan="4"&gt;&lt;/td&gt;
          &lt;td colspan="2" class="case"&gt;&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>And my CSS:</p>
  
  <pre><code>.orgchart {
      border-spacing: 0;
      border-collapse: collapse;
  }
  
  td {
      width: 3em;
      height: 1em;
  }
  
  td.case {
      border: 1px solid black;
  }
  
  td.right {
      border-right: 1px solid black;
  }
  
  td.bottom {
      border-bottom: 1px solid black;
  }
  
  td.top {
      border-top: 1px solid black;
  }
  </code></pre>