Adjustable columns

by kmburke84

HTML

<script src="http://www.ita.es/jquery/jquery.kiketable.colsizable-1.1.js"></script>
<link rel="stylesheet" href="http://www.ita.es/jquery/jquery.kiketable.colsizable.css">
<table>
	<colgroup>
		<col />
		<col />
		<col />
		<col />
	</colgroup>
	<thead>
		<tr>
			<th>...</th>
			<th>...</th>
			<th>...</th>
			<th>...</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>...</td>
			<td>...</td>
			<td>...</td>
			<td>...</td>
		</tr>
		....

CSS

.kiketable-colsizable{
	table-layout: fixed; 
	width : 100%;
	}
.kiketable-colsizable td,
.kiketable-colsizable th{
	overflow : hidden;
	}
.kiketable-th{
	/* Don't set "position: relative" in IE */
	white-space: nowrap !important; /* Only works for THs in IE */
	text-align: left;
	height: 18px;		 /* value safe to change */
	}
.kiketable-th-text{
	height: 100%;
	overflow: hidden;
	}
.kiketable-colsizable-handler{
	float: right;
	cursor: e-resize;
	height: 100%;
	border-left:2px outset white;
	border-right:2px inset white;

	position: relative;
	right: -2px;
	}
html > body .kiketable-colsizable-handler{
	border-right:1px outset white;
	}
.kiketable-colsizable-dragLine{
	position: absolute;
	width: 2px;
	cursor: e-resize;
	background-color: red;	/* value safe to change */
	}
.kiketable-colsizable-dragArea{
	position: absolute;
	cursor: e-resize;
	background-color:red;	/* value safe to change */
	background-color: #000;
	}
.kiketable-colsizable-minimized{
	background-color: #ffd; /* value safe to change */
	color: #bbb;			/* value safe to change */
}

JavaScript

$("table")
		.eq(2)
			.kiketable_colsizable({
				dragMove : false, 
				dragProxy : "area"
				})
			.end()