数据表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;
 }