Datatables scrollX не работает должным образом

Question

У меня есть таблица данных, которая слишком широка, чтобы поместиться в макет, поскольку в ней содержится большое количество столбцов, поэтому scrollX используется для включения горизонтальной прокрутки, чтобы показать таблицу в окне просмотра, которое можно прокручивать. , И элемент длины страницы тоже должен быть горизонтально зафиксирован. Но когда это применяется, возникает разрыв между строками данных и заголовком, и элемент длины страницы не фиксируется. Любая идея будет оценена.

 <table id="reportTable" class="display compact report-table">
    <thead>
    <tr>
        <th>COL 1</th>
        <th>COL 2</th>
        <th>COL 3</th>
        <th>COL 4</th>
        <th>COL 5</th>
        </tr>
    </thead>
    <tbody class="report-table-body">
    </tbody>
    <tfoot>
    </tfoot>
</table>

$('#reportTable').dataTable( {
    "scrollX": true
    "processing": true,
    "serverSide": true,
    "bFilter" : false,
    "ordering": false,
    "lengthMenu": [ 1000, 2000, 5000 ],
    "ajax": {
      <--AJAX request here--->
    },
    "columns": [
       <--columns here--->
    ]
 } );

стиль:

.report-table {
    padding-top: 30px;
 }

 .report-table-body {
    white-space: pre;
 }