jquery-resizable - Table Column Resizing


This example makes the first two columns of the table resizable.


col 1 col 2 col 3 col 4
Column 1 Column 2 Column 3 Column 4
Column 1 Column 2 Column 3 Column 4

To create resizable columns requires a bit of extra effort as tables don't have an easy way to create a drag handle that can be moved around.

To make columns resizable, we can add an element to the right of the column to provide the handle so we have a visual indicator for dragging. The table cell to resize is made position:relative and the injected element is position: absolute and pushed to the right of the cell to provide the drag handle. Dragging then simply resizes the cell.

In practice this means you need some CSS (or jquery styling) to force the injected styling and the logic to inject the element.

<style>
    .resizer {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: auto;
        width: 3px;
        cursor: col-resize;
    }
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" type="text/javascript"></script>
<script src="../src/jquery-resizable.js"></script>
<script>
    //$("td,th")
    $("td:first-child,td:nth-child(2)")
        .prepend("<div class='resizer'></div>")
        .css({ position: "relative" })
        .resizable({
            resizeHeight: false,
            // we use the column as handle and filter
            // by the contained .resizer element
            handleSelector: "",
            onDragStart: function (e, $el, opt) {
                // only drag resizer
                if (!$(e.target).hasClass("resizer"))
                    return false;
                return true;
            }
        });
</script>