floating th

by merganser

HTML

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<table cellpadding="2" cellspacing="3" border="1" id="thead-float" style="background:#eee;margin:40px 0 80px;">
    <thead>
      <tr>
        <th>Table A - Head #1</th>
        <th>Head #2</th>
        <th>Head #3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>The quick brown</td>
        <td>fox jumped over</td>
        <td>the lazy dogs.</td>
      </tr>
      <tr>
        <td>Lorem ipsum dolor sit amet</td>
        <td>consectetur adipisicing elit</td>
        <td>sed do eiusmod tempor incididunt ut </td>
      </tr>
      <tr>
        <td>aaa</td>
        <td>bbb</td>
        <td>ccc</td>
      </tr>
      <tr>
        <td>ddd</td>
        <td>eee</td>
        <td>fff</td>
      </tr>
      <tr>
        <td>ggg</td>
        <td>hhh</td>
        <td>iii</td>
      </tr>
      <tr>
        <td>jjj</td>
        <td>kkk</td>
        <td>lll</td>
      </tr>
      <tr>
        <td>mmm</td>
        <td>nnn</td>
        <td>ooo</td>
      </tr>
      <tr>
        <td>ppp</td>
        <td>qqq</td>
        <td>rrr</td>
      </tr>
      <tr>
        <td>sss</td>
        <td>ttt</td>
        <td>uuu</td>
      </tr>
      <tr>
        <td>vvv</td>
        <td>www</td>
        <td>xxx</td>
      </tr>
      <tr>
        <td>yyy</td>
        <td>zzz</td>
        <td>now i know</td>
      </tr>
      <tr>
        <td>my abc's</td>
        <td>next time won't</td>
        <td>you sing with me?</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <th>Foot 1</th>
        <th>Foot 2</th>
        <th>Foot 3</th>
      </tr>
    </tfoot>
  </table>

JavaScript

/**
 * v0.7.2 THFloat plugin for jQuery
 * http://rommelsantor.com/jquery/thfloat
 *
 * Author(s): Rommel Santor
 *            http://rommelsantor.com
 *
 * This plugin allows you to float a table's <thead> or <tfoot> keeping it
 * in view when it would normally be scrolled out of view.
 *
 * Copyright (c) 2011 by Rommel Santor <rommel at rommelsantor dot com>
 * 
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in
 * all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 * THE SOFTWARE.
 */
(function($){(function($){if(typeof($.fn.copyCSS)!=='undefined')
return;$.fn.getStyles=function(only,except){var product={};var style;var name;if(only&&only instanceof Array){for(var i=0,l=only.length;i<l;i++){name=only[i];product[name]=this.css(name);}}else{var dom=this.get(0);if(window.getComputedStyle){var pattern=/\-([a-z])/g;var uc=function(a,b){return b.toUpperCase();};var camelize=function(string){return string.replace(pattern,uc);};if(style=window.getComputedStyle(dom,null)){var camel,value;if(style.length){for(var...