Table Scroller

by rajeshpillai

HTML

<table id="person" class="tbl1">
    <thead>
        <tr>
            <th>Id</th>
            <th>First Name</th>
            <th>Last Name </th>
        </tr>
    </thead>

    <tbody>
      
    </tbody>
</table>

CSS

/* CSS Reset ----------------------------------------------------------*/ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {     margin: 0;     padding: 0;     border: 0;     outline: 0;     font-size: 100%;     vertical-align: baseline;     background: transparent; } table {     border-collapse: collapse;     border-spacing: 0; } /* h1 style ----------------------------------------------------------*/ h1 {     font-size: 20px;     text-align: center;     background-color: #ffffdd;     border: solid 1px #888;     margin: 0 0 10px 0;     padding: 5px; }  /* Table style ----------------------------------------------------------*/ table.tbl1 {     width: 100%; }  table.tbl1 thead {     background: #A3C2EA url('../images/tbl_head_bg.png') repeat-x scroll 0 0;     color: #333;     width: 100%; }  table.tbl1 tbody {     width: 100%; }  table.tbl1 tr td, table.tbl1 tr th {     border: solid 1px #888;     margin: 0;     padding: 4px 0; }  table.tbl1 tr td {     text-align: center;     background-color: #fff;     color: #444; }  table.tbl1 tbody tr.alt td {     background-color: #e4ecf7; }  table.tbl1 tr.over td, table.tbl1 tbody tr.alt.over td {     background-color: #bcd4ec;     color: #000; }  table.tbl1 a {     color: #2a4a73;     text-decoration: underline; }  table.tbl1 a:hover {     text-decoration: none; }  table.tbl1 a:visited {     color: #bccedc; }  /* Define column widths ----------------------------------------------------------*/

JavaScript

$(function() {
    var $tbl = $("table#person tbody");
    for (var i = 1; i < 120; i++) {

        $tbl.append(
        $('<tr>').append($('<td>').text(i), $('<td>').text(i+2), $('<td>').text(200 - i)));
    }
});

(function($) {

    $.fn.createScrollableTable = function(options) {
        var defaults = {
            width: '400px',
            height: '300px',
            border: 'solid 1px #888'
        };
        var options = $.extend(defaults, options);
        return this.each(function() {
            var table = $(this);
            prepareTable(table);
        });

        function prepareTable(table) {
            var tableId = table.attr('id');
            var bodyWrap = table.wrap('<div></div>').parent().attr('id', tableId + '_body_wrap').css({
                width: options.width,
                height: options.height,
                overflow: 'auto'
            });
            var tableWrap = bodyWrap.wrap('<div></div>').parent().attr('id', tableId + '_table_wrap').css({
                overflow: 'hidden',
                display: 'inline-block',
                border: options.border
            });
            var headWrap = $(document.createElement('div')).attr('Id', tableId + '_head_wrap').prependTo(tableWrap).css({
                width: options.width,
                overflow: 'hidden'
            });
            var headTable = table.clone(true).attr('Id', tableId + '_head').appendTo(headWrap).css({
                'table-layout': 'fixed'
            });
            var bufferCol = $(document.createElement('th')).css({
                width: '100%'
            }).appendTo(headTable.find('thead tr'));
            headTable.find('tbody').remove();
            table.find('thead').remove();
            var allBodyCols = table.find('tbody tr:first td');
            headTable.find('thead tr th').each(function(index) {
                var desiredWidth = getWidth($(allBodyCols[index]));
                $(this).css({
                    width:...