Jquery resizing table header columns

Question

I am trying to resize jquery table header columns. I can do it with in a single table but I am unable to do that if header is with fixed table header.

My jsfiddle trials are below:

With Single Table Header:

With Fixed Table Header:

How can I make fixed table header work with a resize pointer at end of th text?

$(function() {
    var pressed;
    var start;
    var startX;
    var startWidth;
    var wrapper = $("div#wrapper");
    var container = $("table#fixedHeaderTable");

    $("table th").mousedown(function(e) {
        start = $(this);
        startX = e.pageX;
        startWidth = $(this).width();
        $(start).addClass("resizing");
        pressed = true;
    });

    $(document).mousemove(function(e) {
        if(pressed) {
            var newWidth = startWidth + (e.pageX - startX);
            start.width(newWidth);
            wrapper.width(container.width() + 10);
        }
    });

    $(document).mouseup(function() {
        if(pressed) {
            $(start).removeClass("resizing");
            pressed = false;
        }
    });
});

Rupam Datta · Accepted Answer · 2014-04-08 06:59:04Z

2

There is a little correction to the code you wrote. Please find the fiddle

I added following lines to your code. Hope it helps

contentColumn = $('#contentsTable').find('td').eq($(this).index());

contentColumn.width(newWidth);

answered Apr 8, 2014 at 6:59

Rupam Datta

1,8891 gold badge21 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Jquery resizing table header columns

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related