How to align thead and tbody in table?

My HTML Code is like this :

...
    <button class="save bookbtn mt1">More</button>
...

    <div class="cruisedropd">
        <div id="loading" class="loading"></div>
    </div>
...

My Javascript Code is like this

...
$('.save').click(function () {
    ...
    success: function (response) {
        ...
        var elem = $parent.find('.loading').empty();  
                    elem.append('<table class="table">\
                    <tbody>\
                        <tr>\
                            <th>Status</th>\
                            <th>Room Grade</th>\
                            <th>Meal</th>\
                            <th>Per Room.Night</th>\
                            <th>Cancel Policy</th>\
                            <th>Book It</th>\
                        </tr>')
                    for(var i=0; i<response.SearchAvailResponse.Hotel.length; i++){  //make sure to use var

                        elem.append('<tr>\
                            <td>' + Status + '</td>\
                            <td>' + RmGrade + '</td>\
                            <td>' + Meal + '</td>\
                            <td>' + Currency + ' ' + TotalRate + '</td>\
                            <td><a href="#">Cancel Policy</a></td>\
                            <td>\
                                <form action="details.html">\
                                    <button class="bookbtn mt1" type="submit">Book</button>\
                                </form>\
                            </td>\
                        </tr>');  //add the new content
                    }
                    elem.append('</tbody>\
                </table>')
        ...
    }
    ...
}
...

The View is like this : http://ift.tt/1QycVVo

If my case as above, How to align thead and tbody in table?

Any solution to solve my problem?

Thank you very much

via Chebli Mohamed