colResizable is a free jQuery plugin to resize table columns dragging them manually. It is compatible with both mouse and touch devices and has some nice features such as layout persistence after page refresh or postback. It works with both percentage and pixel-based table layouts.
This plugin comes in handy when dealing with large tables improving usability, give it a try!
Download: https://github.com/alvaro-prieto/colResizable
Demonstration: https://jsfiddle.net/euka4rm3/
Plugin homepage: http://www.bacubacu.com/colresizable/
Implementation:
To use this plugin a script reference must be added to the colResizable.min.js file in the head section of the document right after the jQuery script reference. To enhance a table point it with a jQuery wrapper and apply the colResizable() method.
In order to prevent strange behaviors while resizing a column, you are highly encouraged to define the width of the table, either by using its width attribute, an inline style, or a CSS rule. Each table should contain a unique ID.
Script loading:
<head>
<script src="js/jquery.js"></script>
<script src="js/colResizable.min.js"></script>
</head>Html markup:
<body>
<table id="sample" width="100%" >
<tr> <th>header</th> <th>header</th> </tr>
<tr> <td>cell</td> <td>cell</td> </tr>
</table>
</body>Javascript code to create resizable columns:
$(function(){
$("#sample").colResizable({liveDrag:true});
});Options:
Screenshots:
