table re-sizable using jquery UI

by fekkyDev s

HTML

<table class="table"><tr><td><div class="inner"></div></td><td><div class="inner"></div></td></tr><tr><td><div class="inner"></div></td><td><div class="inner"></div></td></tr></table>

CSS

.table{
	border:none;
  width:100%;
  height:100%;
  table-layout: fixed;
	border-collapse:collapse;
}

.table a{
	color:#008db0;
	text-decoration:none;
}

.table a:hover{
	color:#005168;
}

.table select{
	padding:3px;
	color:#999;
	font-family:arial;
	font-size:11px;
	border-radius:0px;
	border:1px solid #ddd;
	background:white;
}

.table td{
	padding:3px;
	color:#999;
	font-family:arial;
	font-size:11px;
	border-radius:0px;
	border:1px solid #ddd;
	background:white;
	white-space:nowrap;
    position:relative;
    top:0px;
    left:0px;
    width:50px;
    height:50px;
}

.table td:hover{
	background:#eee!important;
	color:#666!important;	
}

.inner{
    display:block;
    width:100%;
    height:100%;
    background:#337733;
    min-height:50px;
    min-width:50px;
}

JavaScript

$('.table td').resizable({
		resize: function(event,ui) {
			var col = $(this).index()+1;
			$(this).closest('table').find('tr td:nth-child('+col+')').width(ui.size.width);
			$(this).parent().find('td').height(ui.size.height);
		}
	});