When applying resizeable() method to textbox, page shows scroll bar

I am creating on web page.Inside that

<table style="width: 100%; height: 100%;>
<tr style="height:20%">
<td>

</td>
</tr>
<tr style="height:80%">
<td>
<table style="width: 100%; height: 40%">
<tr>
<td>
<textarea id="Textarea1" runat="server" style="width:100%;height:100%"></textarea>

<textarea id="resizable" runat="server" class="ui-widget-content"></textarea>
</td>
</tr>
</table>
If I using Textarea1,when I maximize or minimize,textarea occupy 100% width.Height does occupy which I mentioning.when I maximize or minimize textarea,it does not show any scroll bar.That is my requirement.But when I using 'resizable' as textarea and trying to do minimize/maximize,it show scrollbar to web page.I don't want scroll bar to page.It shouds occupy 100% width without any scrollbar at initial level.How to do that?I am able to resize width and height of textbox with the help of mouse.

Jquery :

<script>
$(function () {
$("#resizable").resizable();
});
</script>