jquery.headFixed.js

/******************************************************************************
  thead固定テーブル
  require following... 
     <div class="table-wrap" style="position: relative;">
       <table>
         <thead>...</thead>
         <tbody>...</tbody>
       </table>
     </div>
     <script type="text/javascript">
        (function($) {
           $('.table-wrap').headFixed();
        })(jQuery);
     </script>

 要点としては、table要素を複製して、複製したテーブルはtheadだけを、元のテーブルはtbodyのみを表示するようにする。
 その際 displayプロパティにすると元table,複製tableの各々カラム幅が揃わなくなるので、
 display: none ではなく、visibility:hiddenを適用する。
******************************************************************************/
(function($) {
  $.fn.headFixed = function()
  {
    return this.each(function() {
      var $table = $(this).find('table:first');

      var $wrapElement = 
        $('<div>')
        .css({'position': 'absolute','top': 0,'left':0,'width': $table.outerWidth(),'overflow':'hidden'})
        .height($table.find('thead').outerHeight());

      var $wrap = 
        $table
          .clone()
          .insertAfter($table)
          .wrap($wrapElement)
          .css('width','100%')
          .find('tbody')
          .css({'visiblity': 'hidden'})
          .end()
          .parent();

      $table
        .find('thead')
        .css({'z-index':10,'visibility': 'hidden'});

      $(this).on('scroll',function() {
        $wrap.css({'top':$(this).scrollTop()});
      });

      // ウィンドウのリサイズに追随
      $(window).resize(function() {
        $wrap.width($table.outerWidth());
      });
    });
  };
})(jQuery);