title: Getting around IE double border behavior when using border-collapse
body: <p>In IE 8 (Standards Mode) a table set to <code>border-collapse:collapse</code> with borders on the <code>td</code>'s appears to double up the border.</p>
  
  <p>The border is doubled up between cells, and also around the table itself.</p>
  
  <p><img src="https://i.stack.imgur.com/WlTJL.png" alt="doubled up cell borders on IE"></p>
  
  <p>The behaviour I'm looking for is more like the way that Chrome renders a border-collapse table. ie. the actual pixel width of a border collapsed between two cells (each with a border of 1px) is 1px.</p>
  
  <p><img src="https://i.stack.imgur.com/KENBD.png" alt="collapsed border (as desired) rendered in Chrome "></p>
  
  <p>In the example pen that put together you can see the difference in rendering if you run this in either Chrome or IE to see the differences as above.</p>
  
  <p><a href="http://codepen.io/anon/pen/tfzus" rel="nofollow noreferrer">http://codepen.io/anon/pen/tfzus</a></p>
  
  <p>Is there any way to make IE render the table single border as per Chrome?</p>
  
  <p>I have tried <code>border-spacing : 0</code> but it doesn't affect a collapsed table.</p>
  
  <p><strong>EDIT :</strong> I have tried a positional based approach where I limit having adjacent borders based on cell position (taking care to use ':first-child' instead of ':last-child' for broader compatibility).  An example of this CSS is as follows...</p>
  
  <pre><code>table.formatted-table {
    border-collapse : seperate;
  }
  
  table td {
    border-right : 1px solid black;
    border-bottom : 1px solid black;
  }
  
  table tr:first-child td {
    border-top : 1px solid black;
  }
  
  table tr td:first-child {
    border-left : 1px solid black;
  }
  </code></pre>
  
  <p><a href="http://codepen.io/anon/pen/KACxv" rel="nofollow noreferrer">http://codepen.io/anon/pen/KACxv</a></p>
  
  <p>I don't really see this as a an ideal solution, if you have a better one (ie. an obvious setting which I'm just ignorant of) please let me know!</p>
  
  <p>I am using an HTML5 doctype <code>&lt;!DOCTYPE html&gt;</code>, but have tried switching doctype to HTML4 Strict to test this isolated issue. My page contains little else other than the code in the pen at the top of this question, so there are no other factors.  I've also tried this on multiple machines with my other dev mates in the office here running IE10 all with the same behaviour.</p>