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>