title: CSS-Only Scrollable Table with fixed headers
body: <p>I have a solution by which I can create scrollable tables w/fixed header/footer using minor jQuery and CSS - but I am looking for a way to make this a CSS-only solution that is cross-browser compliant.</p>
  
  <p>To be clear, what I am seeking to do is use <strong>only</strong> a <code>table</code> tag (and it's valid sub-tags, <code>colgroup</code>, <code>col</code>, <code>thead</code>, <code>tbody</code>, <code>tfoot</code>, <code>tr</code>, <code>th</code>, <code>td</code>), but adopt a set of CSS rules which will meet the following conditions:</p>
  
  <ol>
  <li>Must maintain column alignment between header / footer / content rows</li>
  <li>Must allow the header/footer to remain fixed while the content scrolls vertically</li>
  <li>Must not require any jQuery or other JavaScript in order to provide the functionality</li>
  <li>Must only use the tags provided above</li>
  </ol>
  
  <p>This code example: <a href="http://jsfiddle.net/TroyAlford/SNKfd/">http://jsfiddle.net/TroyAlford/SNKfd/</a> shows my current approach. Most of the JS is just to populate the table with random values, but the last portion is what drives the left/right scrollability.</p>
  
  <pre><code>$tbody.bind('scroll', function(ev) {
      var $css = { 'left': -ev.target.scrollLeft };
      $thead.css($css);
      $tfoot.css($css);
  });
  </code></pre>
  
  <p>NOTE: The example provided does not render properly in IE, and requires jQuery to provide the horizontal scrolling. I don't care about horizontal scrolling anyway, so it's fine if a solution doesn't do that.</p>