resize columns and tables

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.

HTML

<script src="http://www.bacubacu.com/colresizable/js/colResizable-1.5.min.js"></script>
<link rel="stylesheet" href="http://www.bacubacu.com/colresizable/css/main.css">

 <table id="nonFixedSample"  width="50%" border="0" cellpadding="0" cellspacing="0">
						<tr>
							<th>header</th><th>header</th><th>header</th>
						</tr>
						<tr>
							<td class="left">cell</td><td>cell</td><td class="right">cell</td>
						</tr>
						<tr>
							<td class="left">cell</td><td>cell</td><td class="right">cell</td>
						</tr>
						<tr>
							<td class="left bottom">cell</td><td class="bottom">cell</td><td class="bottom right">cell</td>
						</tr>																	
					</table>

CSS

body{
    
   background:none;
    background-color:white;
    padding:20px;
}

p{
    padding:10px;
    margin-top:6px;
    
}

JavaScript

$("#nonFixedSample").colResizable({
    fixed:false,
    liveDrag:true,
    gripInnerHtml:"<div class='grip2'></div>", 
    draggingClass:"dragging" 
});