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

CSS

body {
    background:none;
    background-color:white;
}
p {
    padding:10px;
    margin-top:6px;
}
th, td {
    text-align:left;
    padding-left:5px !important;
    padding: 2px 5px !important; 
    outline:none;
}

JavaScript

$('td,th').attr('contenteditable', 'true');

$("#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"
});