JQuery / Ajax存在多个数据表大小问题[重复]

I have a problem with two datatables in one page(dtable1 and dtable2) that i put in tab panel.

The table width of dtable2 become smaller after retrieve data by ajax.

<div role="tabpanel">
            <!-- Nav tabs -->
            <ul class="nav nav-tabs" role="tablist">
                <li role="presentation" class="active"><a href="#allocationtab" role="tab" data-toggle="tab">ALLOCATION</a>
                </li>
                <li role="presentation"><a href="#registrationtab" role="tab" data-toggle="tab">REGISTRATION</a>
                </li>
            </ul>
            <div class="tab-content">
                <div role="tabpanel" class="tab-pane active" id="allocationtab">
                <br/>
                <div class="x_content">
                  <table id="allocationdatatable">
                  <thead>
                    <tr>
                      <th>AWB Start</th>
                      <th>AWB End</th>
                      <th>AWB Count</th>
                      <th>Created By</th>
                      <th>Created Date</th>
                    </tr>
                  </thead>

                  </table>
                </div>
                </div>

                <div role="tabpanel" class="tab-pane" id="registrationtab">
                <br/>
                <div class="x_content">
                  <table id="registrationdatatable">
                  <thead>
                    <tr>
                      <th>AWB Start</th>
                      <th>AWB End</th>
                      <th>AWB Count</th>
                      <th>Register By</th>
                      <th>Register Date</th>
                    </tr>
                  </thead>


                  </table>
                </div>

            </div>
            </div>
        </div>

tab panel dtable2

If I remove the tab panel from the script, no issue exists on both datatable. Appreciate if any member could help. Thanks

</div>