how to use jquery resizable in table headers and how to extend parent div when I resize the table header?

here is a sample code, Please extend the table header using jquery resizable() without changing the div height and width. Thanks in advance.

<!DOCTYPE html><html><head><title>resizable columns</title>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/themes/smoothness/jquery-ui.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js"></script>
<style>
th {border: 1px solid black;}
table{border-collapse: collapse;}
.ui-icon, .ui-widget-content .ui-icon {background-image: none;}
</style>
<body>
<div style="overflow: scroll; height: 288px; width : 288px;">
<table>
<tr><th>head 1</th><th>head 2</th></tr><tr><td>a1ysgefjdsgjfhghfgggfhdgghfdhfghsadhg</td><td>b1dsfghjkhgcjg</td></tr></table><script>
$( "th" ).resizable();
</script></div></body></html>

Solution

Here is the answer :

<!DOCTYPE html><html><head><title>resizable columns</title>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/themes/smoothness/jquery-ui.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js"></script>
<style>
th {border: 1px solid black;}
table{border-collapse: collapse;}
.ui-icon, .ui-widget-content .ui-icon {background-image: none;}
</style>
<body>
<div id="draggableDiv" style="overflow: scroll; height: 288px; width: 288px;">
<div>
<table>
<tr><th>head 1</th><th>head 2</th></tr><tr><td>hi all this is one</td><td>hi all this is two</td></tr></table></div><script>
var table_width = $('table').width();
var start_width,end_width;
var diff = 0;
$( "th" ).resizable({
    start: function(e, ui) {
        start_width = ui.size.width;
        console.log("start:"+ui.size.width);
    },
    resize:function(event,ui){ 
      diff = -(start_width - ui.size.width);
      $("table").css('width',(table_width+diff)+'px');
     // console.log(diff);
      //console.log(ui.size.width);
    },
    stop: function(e, ui) {
        end_width = ui.size.width;
        diff = end_width-start_width;
        table_width += diff;
        //$("table").css('width',table_width+'px');
        console.log("end  :"+ui.size.width);
        console.log("diff :"+diff);
    }
});
</script></div></body></html>