floatThead jQuery plugin test

by jasonkylefrank

HTML

<div style="width:3000px">
        some really really wide content goes here
    </div>        
    <table>
            <thead>
                <tr>
                 This sentence is in a tr of the thead but not in a th
               </tr> 
               <tr>
                    <th colspan="9">
                        This sentence is in a tr and th (with colspan). 
                    </th>
               </tr>
               <tr>
               <tr>
                    <th colspan="9">
                        Companies listed on NASDAQ OMX Copenhagen.
                    </th>
               </tr>
               <tr>
                    <th>
                        Full name
                    </th>
                    <th>
                        CCY
                    </th>
                    <th>
                        Last
                    </th>
                    <th>
                        +/-
                    </th>
                    <th>
                        %
                    </th>
                    <th>
                        Bid
                    </th>
                    <th>
                        Ask
                    </th>
                    <th>
                        Volume
                    </th>
                    <th>
                        Turnover
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        A.P. Møller...
                    </td>
                    <td>
                        DKK
                    </td>
                    <td>
                        33,220.00
                    </td>
                    <td>
                        760
                    </td>
                    <td>
                        2.34
                    </td>
                    <td>
                        33,140.00
                    </td>
                    <td>
                        33,220.00
  ...

CSS

body
{
    margin: 0 auto;
    padding: 0 20px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #555;
}
table
{
    border: 0;
    padding: 0;
    margin: 0 0 20px 0;
    border-collapse: collapse;
}
th
{
    padding: 5px; /* NOTE: th padding must be set explicitly in order to support IE */
    text-align: right;        
    font-weight:bold;
    line-height: 2em;
    color: #FFF;
    background-color: #555;
}
tbody td
{
    padding: 10px;
    line-height: 18px;
    border-top: 1px solid #E0E0E0;
}
tbody tr:nth-child(2n)
{
    background-color: #F7F7F7;
}
tbody tr:hover
{
    background-color: #EEEEEE;
}
td
{
    text-align: right;
}
td:first-child, th:first-child
{
    text-align: left;
}

JavaScript

// @preserve jQuery.floatThead 1.2.7 - http://mkoryak.github.io/floatThead/ - Copyright (c) 2012 - 2014 Misha Koryak
// @license MIT

/* @author Misha Koryak
 * @projectDescription lock a table header in place while scrolling - without breaking styles or events bound to the header
 *
 * Dependencies:
 * jquery 1.9.0 + [required] OR jquery 1.7.0 + jquery UI core
 *
 * http://mkoryak.github.io/floatThead/
 *
 * Tested on FF13+, Chrome 21+, IE8, IE9, IE10, IE11
 *
 */
(function( $ ) {
  /**
   * provides a default config object. You can modify this after including this script if you want to change the init defaults
   * @type {Object}
   */
  $.floatThead = $.floatThead || {};
  $.floatThead.defaults = {
    cellTag: 'th:visible', //thead cells are this
    zIndex: 1001, //zindex of the floating thead (actually a container div)
    debounceResizeMs: 10,
    useAbsolutePositioning: true, //if set to NULL - defaults: has scrollContainer=true, doesn't have scrollContainer=false
    scrollingTop: 0, //String or function($table) - offset from top of window where the header should not pass above
    scrollingBottom: 0, //String or function($table) - offset from the bottom of the table where the header should stop scrolling
    scrollContainer: function($table){
      return $([]); //if the table has horizontal scroll bars then this is the container that has overflow:auto and causes those scroll bars
    },
    getSizingRow: function($table, $cols, $fthCells){ // this is only called when using IE,
      // override it if the first row of the table is going to contain colgroups (any cell spans greater then one col)
      // it should return a jquery object containing a wrapped set of table cells comprising a row that contains no col spans and is visible
      return $table.find('tbody tr:visible:first>td');
    },
    floatTableClass: 'floatThead-table',
    floatWrapperClass: 'floatThead-wrapper',
    floatContainerClass: 'floatThead-container',
    copyTableClass: true,...