title: css only - Table overflow with fixed header
body: <p>I am trying to build a table which is scrollable in the x and y directions if the content is bigger than the container. I also want the header to always be visible at the top. I've got the first part working, and the header is always visible at the top, however the header column sizes do not match up with the table table sizes.</p>
  
  <p>I've created this fiddle:</p>
  
  <p><a href="http://jsfiddle.net/xxQQS/1/" rel="nofollow noreferrer">http://jsfiddle.net/xxQQS/1/</a> <code></code></p>
  
  <p>I am after a CSS only solution.</p>
  
  <p>EDIT: There seem to be a quite a few people who seem to think that this cannot only be done with CSS. This may be true, however please don't just post to say 'no this can't be done'. If you can explain why this can't be done without CSS I'll accept your answer.</p>