title: CSS - Non-overlapping / no-double borders with border-collapse: separate;
body: <p>I need a way to add a non-overlapping / no-double borders in the table (this needs to be a general class using selectors etc):</p>
  
  <blockquote>
    <p><a href="http://jsfiddle.net/MadLittleMods/X3VMJ/" rel="nofollow noreferrer">http://jsfiddle.net/MadLittleMods/X3VMJ/</a></p>
  </blockquote>
  
  <p>I need <code>border-collapse: separate;</code> because I use border radius on the title stuff (not in example).</p>
  
  <p><code>td:first-child</code> almost works but it adds extra borders in the "bottom info" td (see example)</p>
  
  <p>Adding <code>td:only-child</code> along with <code>td:not([colspan]):first-child</code> is the best lead I have so far but that still messes up with the "bottom info" td since it only has one thing in it.</p>
  
  <p>I currently am using <code>td:not([colspan]):first-child</code> which works great except for the rows with a single cell that are stretched across the whole table with colspan..</p>