sticky TableHeaders

sticky TableHeaders

by Shrikrishna Gupta

HTML

<div style="width:3000px">
        some really really wide content goes here
    </div>        
    <table>
            <thead>
               <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
                    </td>
                    <td>
                        594
                    </td>
                    <td>
                        19,791,910
                    </td>
                </tr>
                <tr>
                    <td>
                        A.P. Møller...
               ...

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

$(function(){
    $("table").stickyTableHeaders();
});

/*! Copyright (c) 2011 by Jonas Mosbech - https://github.com/jmosbech/StickyTableHeaders
    MIT license info: https://github.com/jmosbech/StickyTableHeaders/blob/master/license.txt */

;(function ($, window, undefined) {
    'use strict';

    var pluginName = 'stickyTableHeaders';
    var defaults = {
            fixedOffset: 0
        };

    function Plugin (el, options) {
        // To avoid scope issues, use 'base' instead of 'this'
        // to reference this class from internal events and functions.
        var base = this;

        // Access to jQuery and DOM versions of element
        base.$el = $(el);
        base.el = el;

        // Cache DOM refs for performance reasons
        base.$window = $(window);
        base.$clonedHeader = null;
        base.$originalHeader = null;

        // Keep track of state
        base.isCloneVisible = false;
        base.leftOffset = null;
        base.topOffset = null;

        base.init = function () {
            base.options = $.extend({}, defaults, options);

            base.$el.each(function () {
                var $this = $(this);

                // remove padding on <table> to fix issue #7
                $this.css('padding', 0);

                $this.wrap('<div class="divTableWithFloatingHeader"></div>');

                base.$originalHeader = $('thead:first', this);
                base.$clonedHeader = base.$originalHeader.clone();

                base.$clonedHeader.addClass('tableFloatingHeader');
                base.$clonedHeader.css({
                    'position': 'fixed',
                    'top': 0,
                    'z-index': 1, // #18: opacity bug
                    'display': 'none'
                });

                base.$originalHeader.addClass('tableFloatingHeaderOriginal');

                base.$originalHeader.after(base.$clonedHeader);

                // enabling support for jquery.tablesorter plugin
                //...