JQuery merge or combine two tables into one

Hi, this is something interesting isn't it? But, this is what my requirement. I will tell you in detail. I have a gridview on my page and another table with the same number of columns. Grid view is for showing and updating data. And I have one extra table for adding a new record. This table immediately follows the actual grid view. The extra table named the class as "tableAdd". So, user sees the gridview header and enter the data into the tableAdd row and hit save button and gridview will refresh and shows up the newly created record.

But there is a problem in look and feel. Because both are in different tables, when the browser width changes or resolution changes the columns in both tables are not in sync, even if they have same columns and same width. So, how to make them sync? Then I got an idea to implement a solution  using JQuery. So, I planned to grab both tables on client side and merge them into one.

<table class="gridview"><tr><td>col1</td><td>col2</td></tr></table>

<table class="tableAdd"><tr><td><input type="text" /></td><td><input type="button" /></td></tr></table>

Now, above are two tables I have and now I need to merge them into one and delete the second table from the DOM.

$(".gridview > tbody:last").append($(".tableAdd > tbody").html());   
$(".tableAdd").remove();

Hope, you understood it well and may helps in some scenarios. Please let me know, if you have any problems.