jQuery - makeTableScrollable

by rajeshpillai

HTML

<div id = "debug"/>

<table id="table" style="width: 300px;" class="blackborder" >
        <thead>
        <tr class="gridheader">
            <th>Head 1</th>
            <th>Head 2</th>
            <th>Head 3</th>
            <th>Head 4</th>
        </tr>
        </thead>

        <tbody>
        <tr>
            <td style="width: 200px">Column 1 Content</td>
            <td style="width: 100px">Column 2 Content</td>
            <td style="width: 100px">Column 3 Content</td>
            <td style="width: 200px">Column 4 Content</td>                    
        </tr>
        <tr>
            <td>Column 1 Content</td>
            <td>Column 2 Content</td>
            <td>Column 3 Content</td>
            <td>Column 4 Content</td>                    
        </tr>                <tr>
            <td>Column 1 Content</td>
            <td>Column 2 Content</td>
            <td>Column 3 Content</td>
            <td>Column 4 Content</td>                    
        </tr>                <tr>
            <td>Column 1 Content</td>
            <td>Column 2 Content</td>
            <td>Column 3 Content</td>
            <td>Column 4 Content</td>                    
        </tr>                <tr>
            <td>Column 1 Content</td>
            <td>Column 2 Content</td>
            <td>Column 3 Content</td>
            <td>Column 4 Content</td>                    
        </tr>                <tr>
            <td>Column 1 Content</td>
            <td>Column 2 Content</td>
            <td>Column 3 Content</td>
            <td>Column 4 Content</td>                    
        </tr>
        <tr>
            <td>Column 1 Content</td>
            <td>Column 2 Content</td>
            <td>Column 3 Content</td>
            <td>Column 4 Content</td>                    
        </tr>                <tr>
            <td>Column 1 Content</td>
            <td>Column 2 Content</td>
            <td>Column 3 Content</td>
            <td>Column 4 Content</td>                    
       ...

CSS

table th, table td {
    margin:0;
    padding:0;
}
table {
    border: 1px solid #ddd;
}

th, td {
    border: 1px solid #ddd;
    padding:4px;
}

JavaScript

var debug = $("#debug");
(function($) {
    $.fn.getHeaderRow = function() {
        return $(this).parent().prev(".gridHeaderRow");
    }
        
    $.fn.makeTableScrollable = function(options) {
        return this.each(function() {
            var $table = $(this);

            var opt = {
                // height of the table
                height: "150px",
                // right padding added to support the scrollbar
                rightPadding: "10px",
                // cssclass used for the wrapper div
                cssClass: "blackborder"
            }
            $.extend(opt, options);

            var $thead = $table.find("thead");
            var $ths = $thead.find("th");
            var id = $table.attr("id");
            var cssClass = $table.attr("class");

            if (!id) id = "_table_" + new Date().getMilliseconds().ToString();

            $table.width("+=" + opt.rightPadding);
            $table.css("border-width", 0);

            // add a column to all rows of the table
            /*var first = true;
            $table.find("tr").each(function() {
                var row = $(this);
                if (first) {
                    row.append($("<th>").width(opt.rightPadding));
                    isFirst = false;
                }
                else row.append($("<td>").width(opt.rightPadding));
            });*/

           // force full sizing on each of the th elemnts
            $ths.each(function() {
                var $th = $(this);
                //$th.css("width", $th.width());
                $th.css("width","auto");
            });
            
             // size the first row to the headers
            $table.getHeaderRow().find("th").each(function(i) {
                var $core = $table.find("tr:first").find("td").eq(i);
                
                $core.width($(this).width());
            });
            
            // then size the headers to the first row
           ...