Fixed column using Jquery (issue with table headers)
<p>I have an HTML table and I need the first column of the table to be fixed so I can scroll all the way the the right and see the information related to any record of the first column, when I try to scroll the first column is ok, but it also put as fixed the next two headers of my table.</p>

<p>This is my jquery:</p>

<pre><code>(function($) {

$.fn.tableHeadFixer = function(param) {
    var defaults = {
        head: true,
        foot: false,
        left: 0,
        right: 0
    };

    var settings = $.extend({}, defaults, param);

    return this.each(function() {
        settings.table = this;
        settings.parent = $("&lt;div&gt;&lt;/div&gt;");
        setParent();

        if(settings.head == true)
            fixHead();

        if(settings.left &gt; 0)
            fixLeft();

        // self.setCorner();

        $(settings.parent).trigger("scroll");

        $(window).resize(function() {
            $(settings.parent).trigger("scroll");
        });
    });

    function setTable(table) {

    }


    function setParent() {
        var container = $(settings.table).parent();
        var parent = $(settings.parent);
        var table = $(settings.table);

        table.before(parent);
        parent.append(table);
        parent
            .css({
                'width' : '100%',
                'height' : container.css("height"),
                'overflow' : 'scroll',
                'max-height' : container.css("max-height"),
                'min-height' : container.css("min-height"),
                'max-width' : container.css('max-width'),
                'min-width' : container.css('min-width')
            });

        parent.scroll(function() {
            var scrollWidth = parent[0].scrollWidth;
            var clientWidth = parent[0].clientWidth;
            var scrollHeight = parent[0].scrollHeight;
            var clientHeight = parent[0].clientHeight;
            var top = parent.scrollTop();
            var left = parent.scrollLeft();

            if(settings.head)
                this.find("thead tr &gt; *").css("top", top);

            if(settings.left &gt; 0)
                settings.leftColumns.css("left", left);

        }.bind(table));
    }

    function fixHead () {
        var thead = $(settings.table).find("thead");
        var tr = thead.find("tr");
        var cells = thead.find("tr &gt; *");

        setBackground(cells);
        cells.css({
            'position' : 'relative'
        });
    }


    function fixLeft () {
        var table = $(settings.table);

        var fixColumn = settings.left;

        settings.leftColumns = $();

        for(var i = 1; i &lt;= fixColumn; i++) {
            settings.leftColumns = settings.leftColumns
                .add(table.find("tr &gt; *:nth-child(" + i + ")"));
        }

        var column = settings.leftColumns;

        column.each(function(k, cell) {
            var cell = $(cell);

            setBackground(cell);
            cell.css({
                'position' : 'relative'
            });
        });
    }


    function setBackground(elements) {
        elements.each(function(k, element) {
            var element = $(element);
            var parent = $(element).parent();

            var elementBackground = element.css("background-color");
            elementBackground = (elementBackground == "transparent" || elementBackground == "rgba(0, 0, 0, 0)") ? null : elementBackground;

            var parentBackground = parent.css("background-color");
            parentBackground = (parentBackground == "transparent" || parentBackground == "rgba(0, 0, 0, 0)") ? null : parentBackground;

            var background = parentBackground ? parentBackground : "white";
            background = elementBackground ? elementBackground : background;

            element.css("background-color", background);
        });
    }
};
})(jQuery);
</code></pre>

<p>And I also put the example in this <a href="http://jsfiddle.net/tht8bbbd/" rel="nofollow">Fiddle</a> on it the window dont let the example to scroll so if you load it locally and make the window small you'll be able so scroll and see the issue I mentioned before with the headers of the table</p>

<p>Hope someone help me on this!</p>