Table Column Resizing

A small jQuery plug-in to make HTML DOM elements resizable. This small, self-contained jQuery plug-in allows you to make DOM elements resizable using a sizing handle. It works with Mouse and Touch events so you can resize elements on mobile devices. Resizables are useful if you want to add resizing features to your HTML layouts for things like like resizable dialogs, splitter panes or elements that can be resized by a user in a layout. The primary features of Table Column Resizing Plugin:

Add a resizing handle to each column that is to be resized
Attach the handle dynamically to the resizer
Provide some CSS styling to ensure the resizing handle shows in the right location

Live Demo

Col 1	Col 2	Col 3	Col 4
Column 1	Column 2	Column 3	Column 4
Column 1	Column 2	Column 3	Column 4
Column 1	Column 2	Column 3	Column 4
Column 1	Column 2	Column 3	Column 4
Column 1	Column 2	Column 3	Column 4

How to Use

Add the css below to your html page

.resizer {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    width: 3px;
    cursor: col-resize;
}

th {
    color: white;
    background: #535353;
}

Create a container where you want to render table

<table id="mytable">
    <thead>
        <th>
            Col 1
        </th>
        <th>
            Col 2
        </th>
        <th>
            Col 3
        </th>
        <th>
            Col 4
        </th>
    </thead>
    <tbody>
        <tr>
            <td>
                Column 1
            </td>
            <td>
                Column 2
            </td>
            <td>
                Column 3
            </td>
            <td>
                Column 4
            </td>
        </tr>
        <tr>
            <td>
                Column 1
            </td>
            <td>
                Column 2
            </td>
            <td>
                Column 3
            </td>
            <td>
                Column 4
            </td>
        </tr>
        <tr>
            <td>
                Column 1
            </td>
            <td>
                Column 2
            </td>
            <td>
                Column 3
            </td>
            <td>
                Column 4
            </td>
        </tr>
        <tr>
            <td>
                Column 1
            </td>
            <td>
                Column 2
            </td>
            <td>
                Column 3
            </td>
            <td>
                Column 4
            </td>
        </tr>
        <tr>
            <td>
                Column 1
            </td>
            <td>
                Column 2
            </td>
            <td>
                Column 3
            </td>
            <td>
                Column 4
            </td>
        </tr>
    </tbody>
</table>

Load jQuery library together with the Table Column Resizing library into your code

<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: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>