title: Fixed header and footer within table and div?
body: <p>I have a table that is within a scrollable div window. The header is enclosed in a thead tag and the footer is in a separate tbody at the bottom. I need them to be fixed to the screen while maintaining their alignment/orientation. </p>
  
  <p>I've tried </p>
  
  <pre><code>position:absolute
  </code></pre>
  
  <p>and that skews everything.</p>
  
  <p>See the following fiddle:
  <a href="http://jsfiddle.net/jkgt3wdm/" rel="nofollow">http://jsfiddle.net/jkgt3wdm/</a></p>
  
  <p>I am open to all suggestions. </p>
  
  <p>EDIT: also needs to be able to scroll to the left and right. </p>