数据表在窗口大小调整和刷新时的响应方式不同

Question

我在标签上使用了两个数据表。当我调整窗口大小时，它表现得很正常，因为我在window.resize上编写了脚本。默认情况下，脚本也在document.ready函数上，因此在刷新同一页面时它会显示不同的格式。 我正在添加图像来演示它。这是在调整窗口大小时..

这个是刷新时（相同尺寸）

这是我的js

$(window).on('load resize',function(){ 
    $('.data-table_1').DataTable({ 
    "paging": true, 
    "info": true, 
    "responsive": true, 
    "aoColumnDefs": [{ "bSortable": false, "aTargets": ["no-sort"] }],     "bInfo": true }); 

$('.data-table_2').DataTable({ 
    "paging": true, 
    "info": true, 
    "responsive": true, 
    "aoColumnDefs": [{ "bSortable": false, "aTargets": ["no-sort"] }],     "bInfo": true }); 

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { 
    $('.data-table:visible').each(function(e){
    $(this).DataTable().columns.adjust().responsive.recalc(); 
    }); 
}); 

我的HTML已开始

//My first Table
<table class="display data-table data-table_1" cellspacing="0" width="100%" id="table1">
    <thead><tr><th>Order Id</th><th>Partner</th><th>Price</th><th>paypal transaction id</th><th>View</th></tr></thead><tbody>
    //MY Content
    </tbody>
</table>

//My Second Table
<table class="display data-table data-table_2" cellspacing="0" width="100%" id="table2">
   <thead><tr><th>Transaction Id</th><th>Paypal Payer Id</th><th>Transaction Time</th><th>Amount</th><th>Refund Status</th></tr></thead><tbody>
   //My content
    </tbody>
</table>