table grid not form correctly by jQuery DataTable

check image

<section class=”card-body p-2″>
<div class=”Datatable-Responsive”>
<table class=”table table-striped” id=”idTable”>
<thead>
</thead>
<tbody></tbody>
</table>
</div>
</section>

$(‘#idTable’).DataTable({
“destroy”: true,
“order”: [
[1, ‘asc’],
[2, ‘asc’]
],
“lengthMenu”: [
[10, 20, 50, 100, 200, -1],
[10, 20, 50, 100, 200, “All”]
],
“dom”: ‘Bfrtip’,
“pageLength”: pageLength,
//”columnDefs”: [{ “width”: “500px”, “targets”: 3 }],
“aaData”: datas,
“columns”: columnName,
“oLanguage”: {
“sSearch”: “”,
“searchPlaceholder”: “Search”
},
“searching”: false,
language: {
“sLengthMenu”: “Show _MENU_ Entries”,
“zeroRecords”: “No record found”,
“info”: “Total – _TOTAL_ Entries”,
“infoEmpty”: “No record found”,
paginate: {
next: ‘❯’, // or ‘→’
previous: ‘❮’ // or ‘←’
}
},
scrollY: ’50vh’,
scrollCollapse: true,
“fnRowCallback”: function(nRow, aData, iDisplayIndex) {
/* Append the grade to the default row class name */
$(‘td:eq(0)’, nRow).html(‘<b>’ + eval(iDisplayIndex + 1) + ‘</b>’);
$(‘td’, nRow).css(‘background-color’, ‘#FFFFFF’)
},
});