title: CSS Table Columns not lining up
body: <p>I have the following Table example here: <a href="http://jsfiddle.net/Lu9y3/" rel="nofollow">http://jsfiddle.net/Lu9y3/</a></p>
  
  <p>Which is based on the Telerik example here: <a href="http://demos.telerik.com/aspnet-mvc/Grid/Paging?theme=vista" rel="nofollow">http://demos.telerik.com/aspnet-mvc/Grid/Paging?theme=vista</a> which is a UI component I am using in an app I am building.</p>
  
  <p>As you can see they use two separate tables to achieve the fixed header and scrollable content. BUT the headers and columns in both tables still line up correctly.</p>
  
  <p>Even if I <strong>REMOVE</strong> the style from the <code>&lt;col&gt;</code> in the Telerik examples using Web Inspector the columns will still line up... And they are <strong>NOT</strong> using jQuery to adjust the width. So how come they have their columns lining up and mine do not?</p>
  
  <p>How are they doing this?</p>