OVERFLOWを設定したDIVの中にデータ表示用のテーブルBを格納しています。
また、Bテーブルのヘッダ情報を常に上段に表示しておきたいので、上記のDIVの上に別DIVを定義し、この中にAテーブルを収めました。

テーブルのTDにwhite-space: nowrap;のスタイルを定義していますが、テーブル自体に特段スタイルを定義していません。それ故、
テーブルBの列幅が表示されるデータ次第で可変してテーブルB自体の横幅も増減、結果
ヘッダ表示用のテーブルAと一致した横幅にならない・列幅もテーブルBと合わない、という事象を起こしています。
画像の説明をここに入力

【質問】
テーブルAとテーブルBの列幅をきっちり合わせた表示をするにはどういった手続きを行えばよろしいのでしょうか？
①テーブルBの横幅を取得して、テーブルAの横幅に設定
②テーブルBの各列の幅を%で取得して、テーブルAの各列の幅に設定

という感じだとは思うのですが、JQUeryでサクっとやる場合、どんな感じのコーディングになるでしょうか？
ありきたりかも知れませんが、ご支援を頂けたら幸いです。

/* CSS データ用のテーブルを囲むDIV */
.updLines {
    overflow: auto;
}


  <div class="updHeader" style="clear: both">
     <table>
        <tr>
            <td>予約番号</td>
            <td>行№</td>
            <td>受注先CD</td>
            <td>受注先名</td>
            <td>出荷先CD</td>
            <td>出荷先名</td>
            <td>納入先名</td>
            <td>営業担当者</td>
            <td>品名CD</td>
            <td>品名</td>
            <td>ロット№</td>
            <td>予約数量</td>   
            <td>受注済数量</td>
            <td>予約終了日</td>
            <td>予約登録日</td>  
            <td>摘要</td>
        </tr>
    </table>
  </div>
  <div class="updLines">
    <table class="exstrsv">
    </table>
  </div>

// JQuery
.done(function(data, textStatus, jqXHR){
            if (data.length <= 0) {
                $(".updHeader").after("<p id='norsvmsg'>条件に合致する予約情報がありません。</p>");
            } else {
                for (var i = 0; i < data.length; i++) {
                    $(".exstrsv").append("<tr><td class='td01'>" +
                                "<input type='radio' name='act" + i + "' value='0' checked='checked' />未" +
                                "<input type='radio' name='act" + i + "' value='1' />変" +
                                "<input type='radio' name='act" + i + "' value='2' />追" +
                                "<input type='radio' name='act" + i + "' value='3' />取" +
                                "</td><td class='exupd'>" + data[i][0] +
                                "</td><td class='exupd'>" + data[i][1] + "</td><td class='exupd'>" + data[i][2] +
                                "</td><td class='exupd'>" + data[i][3] + "</td><td class='exupd'>" + data[i][4] +
                                "</td><td class='exupd'>" + data[i][5] + "</td><td class='exupd'>" + data[i][6] +
                                "</td><td class='exupd'>" + data[i][7] + "</td><td class='exupd'>" + data[i][8] +
                                "</td><td class='exupd'>" + data[i][9] + "</td><td class='exupd'>" + data[i][10] +
                                "</td><td class='exupd'>" + data[i][11] + "</td><td class='exupd'>" + data[i][12] +
                                "</td><td class='exupd'>" + data[i][13] + "</td><td class='exupd'>" + data[i][14] + "</td></tr>");
                }
            }
            dp_a.resolve();
})
.fail(function(jqXHR, textStatus, errorThrown){
        console.log("###予約情報取得時のサーバ系エラー###");
        dp_a.reject();
});
return dp_a;

画像の説明をここに入力