How to properly generate datatable while inside the the bootstrap modal?

notice88

This is how I initialize the datatable inside the modal. After rendering it.

when i click the pagination, sort, or search. the table becomes normal again.
it only happens when i implement the scrollY property.
When the datatable is only at the actual page and not inside the modal, no abnormalities found even there is scrollY. what should I do?
BtW, I'm using bootstrap modal.

var expense_table = $('#expense_table').DataTable({
aaSorting : [[1,'asc']],
ajax : "<?php echo base_url(); ?>",
pageLength: 5,
"sScrollY": "250px",
columns : [
{
data : {employeeExpenseId:'employeeExpenseId',expensePosted:'expensePosted'},
sortable: false,
render : function(data) {
if(data.expensePosted == 0){
return '<input type="checkbox" class="checked" name="employeeExpenseId[]" value="'+data.employeeExpenseId+'">';
}else{
return '<input type="checkbox" class="checked" name="employeeExpenseId[]" value="'+data.employeeExpenseId+'" disabled>';
}
},
sClass : "dataTableChkbx"
},
{data: 'fullName'},
{data: 'expenseName'},
{data: 'expenseAmount'},
{data: 'expenseDate'},
],drawCallback : function() {
// Double click
});
},fnServerData: function(sSource, aoData, fnCallback){
$.ajax(
{
'dataType': 'json',
'type' : 'POST',
'url' : sSource,
'data' : {action:'get_expenses', payCalendarId:<?php echo $payCalendarId; ?>, payrollGroupId:
'success' : function(msg){
fnCallback(msg);
//$('.overlay').hide();
// adjustTable();
}
}
);
}