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.

by kmburke84

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">
<h1><a href="http://www.bacubacu.com/colresizable">Resize columns and tables </a></h1>

<p> With colResizable you can resize and drag columns in html tables</p>

<table id="sample" width="100%" border="0" cellpadding="0" cellspacing="0" >
<tbody><tr>
<th style="width: 20%;">header</th><th style="width: 40%;">header</th><th style="width: 15%;">header</th><th style="width: 25%;">header</th>
</tr>
<tr>
	<td class="left">cell</td><td>cell</td><td>cell</td><td class="right">cell</td>
</tr>
<tr>
		<td class="left">cell</td><td>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">cell</td><td class="bottom right">cell</td>
</tr>				
   
</tbody></table>

<br/>

<p> Using colResizable it is also posible to customize the column anchors and make them look as you want</p>

<table id="sample2" width="100%" border="0" cellpadding="0" cellspacing="0" >
<tbody><tr>
<th style="width: 20%;">header</th><th style="width: 40%;">header</th><th style="width: 15%;">header</th><th style="width: 25%;">header</th>
</tr>
<tr>
	<td class="left">cell</td><td>cell</td><td>cell</td><td class="right">cell</td>
</tr>
<tr>
		<td class="left">cell</td><td>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">cell</td><td class="bottom right">cell</td>
</tr>				
   
</tbody></table>
<br/>

<p>it also can handle non-fixed tables so you can resize columns independetly</p>

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

CSS

body{
    
   background:none;
    background-color:white;
}

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

JavaScript

$("#sample").colResizable({liveDrag:true});

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


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