Resizing table columns in a big table

Question

I'm looking for a simple way to make my table columns re-sizable. Since my table has a lot of columns the page has to have a scrollbar. That seems to make all the code for resizing not working. I have tried my own code and several plugins but it never works.

jsfiddle with a plugin

jsfiddle without plugin but still not working

I'm using this code I found here in so:

$(function() {
    var pressed = false;
    var start = undefined;
    var startX, startWidth;

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

    $(document).mousemove(function(e) {
        if(pressed) {
            $(start).width(startWidth+(e.pageX-startX));
        }
    });

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

Answer 1

Your problem is the width of the table.

try setting width:200%; to table. After if you want you can set overflow:scroll;

fiddle updated http://jsfiddle.net/Mz2HN/

I have edit only the css

table {
    border-width: 1px;
    border-style: solid;
    border-color: black;
    border-collapse: collapse;
    width:200%;
    overflow:scroll;
}

table td {
    border-width: 1px;
    border-style: solid;
    border-color: black;
}

table th {
    border: 1px;
    border-style: solid;
    border-color: black;
    background-color: green;
    cursor: col-resize;
}

table th.resizing {
    cursor: col-resize;
}

.noSelect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}