jQuery-Fixed-Table-Header

Saved for further use. Courtesy http://www.mustafaozcan.net/en/page/jQuery-Fixed-Table-Header-Plugin.aspx

by ravimallya

HTML

<table width="500">
        <tr>
            <td colspan="2" class="baslik">
                jQuery Fixed Table Header Demo Page
            </td>
        </tr>
    </table>
    <br />
    Please scroll page for see action and plugin description.
    <br />
    <br />
    You will see fixed header for each table when you scroll down the page.
    <br />
    And if highlight feature setting is true you will see highlighted row when is mouse over the
    each row.
    <br />
    <br />
    <table cellpadding="5" border="1" class="tbl1">
        <thead>
            <tr style="background-color: #094b8d; color: White">
                <td>
                    School
                </td>
                <td>
                    Date
                </td>
                <td>
                    Time1
                </td>
                <td>
                    Time2
                </td>
                <td>
                    Time3
                </td>
                <td>
                    Facility
                </td>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <td colspan="6">
                    tfoot test row
                </td>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <td>
                    School1
                </td>
                <td>
                    01.01.2009
                </td>
                <td>
                    08:00
                </td>
                <td>
                    10:00
                </td>
                <td>
                    11:00
                </td>
                <td>
                    Location of Event
                </td>
            </tr>
            <tr>
                <td>
                    School2
                </td>
                <td>
                    02.01.2009
                </td>
                <td>
                    10:00
                </td>
                <td>
                    12:00
   ...

CSS

html *
        {
            font-family: Tahoma, "Trebuchet MS" , Verdana;
            font-size: 11px;
        }
        body
        {
            margin: 0;
            padding: 0;
        }
        .baslik
        {
            background-color: #6b8e23;
            color: white;
            font-weight: bold;
            text-align: center;
            padding: 5px;
        }
        .tdmetin
        {
            background-color: #dcdcdc;
            color: #00008b;
            font-weight: bold;
            padding: 5px;
        }
        .code
        {
            background-color: #EEEEEE;
            border: 1px solid #CCCCCC;
            padding: 5px;
            width: 400px;
        }
        .highlight
        {
            background-color: Highlight !important;
        }
        .highlight2
        {
            background-color: Black !important;
            color: White;
        }
        .tbl1, .tbl2, .tbl3
        {
            border-collapse: collapse;
            border: solid 1px gray;
        }

JavaScript

jQuery.fn.fixedtableheader = function (options) {
    var settings = jQuery.extend({
        headerrowsize: 1,
        highlightrow: false,
        highlightclass: "highlight"
    }, options);
    this.each(function (i) {
        var $tbl = $(this);
        var $tblhfixed = $tbl.find("tr:lt(" + settings.headerrowsize + ")");
        var headerelement = "th";
        if ($tblhfixed.find(headerelement).length === 0) headerelement = "td";
        if ($tblhfixed.find(headerelement).length > 0) {
            $tblhfixed.find(headerelement).each(function () {
                $(this).css("width", $(this).width());
            });
            var $clonedTable = $tbl.clone().empty();
            var tblwidth = GetTblWidth($tbl);
            $clonedTable.attr("id", "fixedtableheader" + i).css({
                "position": "fixed",
                "top": "0",
                "left": $tbl.offset().left
            }).append($tblhfixed.clone()).width(tblwidth).hide().appendTo($("body"));
            if (settings.highlightrow) $("tr:gt(" + (settings.headerrowsize - 1) + ")", $tbl).hover(function () {
                $(this).addClass(settings.highlightclass);
            }, function () {
                $(this).removeClass(settings.highlightclass);
            });
            $(window).scroll(function () {
              //  if (jQuery.browser.msie && jQuery.browser.version == "6.0") $clonedTable.css({
           //         "position": "absolute",
                //    "top": $(window).scrollTop(),
              //      "left": $tbl.offset().left
             //   });
               // else 
                    $clonedTable.css({
                    "position": "fixed",
                    "top": "0",
                    "left": $tbl.offset().left - $(window).scrollLeft()
                });
                var sctop = $(window).scrollTop();
                var elmtop = $tblhfixed.offset().top;
                if (sctop > elmtop && sctop <= (elmtop + $tbl.height() -...