title: How can I freeze THEAD with CSS only?
body: <p>I'm trying to freeze the <code>THEAD</code> section of my table so that as I scroll, the <code>THEAD</code> is always visible. I've accomplished this by attaching an event handler to the <code>scroll</code> event in jQuery which sets the <code>top</code> position of the <code>THEAD</code> to the scroll offset:</p>
  
  <pre><code>$(".scroll").scroll(function () {
      $("#header thead").css({"top": ($(".scroll").scrollTop()) + "px"});
  });
  </code></pre>
  
  <p>You can see it in action at this <a href="http://jsfiddle.net/ciaoben/aVT7W/268/" rel="nofollow">FIDDLE</a></p>