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 YameenYasin

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">
<tbody>
<tr>
  <th>headerheaderheader</th>
  <th>header</th>
  <th>header</th>
  <th>header</th>
</tr>
<tr>
	<td>cell</td>
  <td>cell</td>
  <td>cell</td>
  <td>cell</td>
</tr>
<tr>
		<td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
</tr>
<tr>
	<td>cell</td>
  <td>cell</td>
  <td>cell</td>
  <td>cell</td>
</tr>				
   
</tbody></table>

CSS

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

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

#sample tr th{
  word-break:break-all;
  width:400px;
}

JavaScript

$("#sample").colResizable({
fixed:false,
liveDrag:true,
minWidth:5,
resizeMode: 'overflow'});