DataTable header Not Fixing in jquery ajax

Question

<table cellpadding="0" cellspacing="0" border="0" class="table table-bordered table-striped tblquick " id="Phone_Table" >

<thead class="font-weight-light">

<tr>

<th width="100px"> Numbers</th>

<th width="100px">Edit</th>

<th width="100px">Delete</th>

</tr>

</thead>

<tbody>

@foreach (var item in Model.NumberList)

{

<tr>

<td width="100px" style="font:small">@item.PHONE_NUMBER</td>

<td width="100px">

<a class="Update" href="#">Update</a>

</td>

<td width="100px"><a href="#">Delete</a></td>

</tr>

}

</tbody>

</table>

 

 

Scripts that is using

<script src="~/Scripts/DataTables/jquery.datatables.js"></script>

<script src="~/Scripts/DataTables/datatables.bootstrap.js"></script>

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/fixedheader/3.1.5/js/dataTables.fixedHeader.min.js">

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js">

<link rel="stylesheet" type="text/css" href="https://code.jquery.com/jquery-3.3.1.js">

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/fixedheader/3.1.2/css/fixedHeader.dataTables.min.css">

 

 

 

var table = $('#Phone_Table').DataTable({

"bAutoWidth": false,

"bScrollCollapse": true,

"responsive": true,

"searching": true,

fixedHeader: true,

"bDestroy": true,

"dom": "<'row'<'col-lg-12'tr>>" +

"<'row'<'col-lg-3'l><'col-lg-12'p>>",

"oLanguage": {

"sLengthMenu": "_MENU_ ",

"fixedHeader": true,

"fixedHeader": {

header: true,

}

},

});