Resizable table columns
HTML
<div>
<table class="resizable">
<colgroup>
<col style="width: 100px"/>
<col style="width: 150px"/>
<col style="width: 100px"/>
<col style="width: 100px"/>
<col style="width: 100px"/>
<col style="width: 100px"/>
</colgroup>
<thead>
<tr>
<th>
<span class="columnLabel">Column 1</span>
<div class="resizeHelper ui-resizable-handle ui-resizable-e"> </div>
</th>
<th>
<span class="columnLabel">Column 2</span>
<div class="resizeHelper ui-resizable-handle ui-resizable-e"> </div>
</th>
<th>
<span class="columnLabel">Column 3</span>
<div class="resizeHelper ui-resizable-handle ui-resizable-e"> </div>
</th>
<th>
<span class="columnLabel">Column 4</span>
<div class="resizeHelper ui-resizable-handle ui-resizable-e"> </div>
</th>
<th>
<span class="columnLabel">Column 5</span>
<div class="resizeHelper ui-resizable-handle ui-resizable-e"> </div>
</th>
<th>
<span class="columnLabel">Column 6</span>
<div class="resizeHelper ui-resizable-handle ui-resizable-e"> </div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1</td>
<td>Column 2</td>
<td>Column 3</td>
<td>Column 4</td>
<td>Column 5</td>
<td>Column 6</td>
</tr>
<tr>
<td>Row 2</td>
<td>Column 2</td>
<td>Column 3</td>
<td>Column 4</td>
...
CSS
th {
border-right: 1px solid black;
}
/*
resizable columns
*/
JavaScript
/**
* enables resizable data table columns.
* Script by Ingo Hofmann
*/
(function($) {
/**
* Widget makes columns of a table resizable.
*/
$.widget("ih.resizableColumns", {
/**
* initializing columns
*/
_create: function() {
this._initResizable();
},
/**
* init jQuery UI sortable
*/
_initResizable: function() {
var colElement, colWidth, originalSize;
var table = this.element;
this.element.find("th").resizable({
// use existing DIV rather than creating new nodes
handles: {
"e": " .resizeHelper"
},
// default min width in case there is no label
minWidth: 10,
// set min-width to label size
create: function(event, ui) {
var minWidth = $(this).find(".columnLabel").width();
if (minWidth) {
// FF cannot handle absolute resizable helper
/*if ($.browser.mozilla) {
minWidth += $(this).find(".ui-resizable-e").width();
}*/
minWidth += $(this).find(".ui-resizable-e").width();
$(this).resizable("option", "minWidth", minWidth);
}
},
// set correct COL element and original size
start: function(event, ui) {
var colIndex = ui.helper.index() + 1;
colElement = table.find("colgroup > col:nth-child(" + colIndex + ")");
colWidth = parseInt(colElement.get(0).style.width, 10); // faster than width
originalSize = ui.size.width;
},
// set COL width
resize:...