无法禁用数据表标题中的水平滚动

Question

我一直在为我公司的网站使用数据表。但最近在最新版本的 Chrome 和 Edge（旧版本工作得很好）中开始出现问题。其中之一是数据表头部。桌子应该水平移动，头部和身体部分连接在一起并一起移动。但是现在标题部分和正文部分是完全独立的，并且标题部分似乎有一个不知从哪里冒出来的水平滚动条（如下面的屏幕截图所示）。

我尝试将标题位置设置为 sticky 和 overflow-x: hidden 但没有成功。以下是我的代码中可能与该问题相关的部分内容。此外，如果需要，我可以添加更多详细信息。 （PS：这些代码是用PHP脚本实现的）

CSS部分：

    div.dataTables_scrollHead {

  position: sticky !important;

  overflow-x: hidden;

  top: 0px;

  z-index: 99;

  background-color: white;

  box-shadow: 0px 5px 5px 0px rgba(82, 63, 105, 0.08);

}

table.dataTable thead .sorting {

    background: url("") no-repeat scroll right center rgba(0, 0, 0, 0);

                overflow-x: hidden;

}

table.datatable th {

                font-size: 10px;

                position: sticky;

                overflow-x: hidden;

}

 

table.datatable td {

                font-size: 9px;

}

div.dt-buttons {

                position:relative;

                bottom: 65px;

                left: 263px;

                width: 30%;

                }

img.btn-excel {

                width: 8%;

                  cursor: pointer;

                }

数据表部分：

    $(document).ready(function() {

                    var table= $('#example').dataTable( {

       "processing": true,

       "serverSide": true,

       responsive: true,

       scrollX: true,

       scrollCollapse: true,

       fixedHeader: {

                header: true,

                footer: true

            },

       "ajax": {

        "url": "example.php",

              "rowCallback": function( row, data ) {

                if ( $.inArray(data.DT_RowId, selected) !== -1 ) {

                    $(row).addClass('selected');

                }

            }

              },

                                  

        dom: 'lBfrtip',

    } );

表头HTML部分：

    <div class="space"> &nbsp;</div>

    <div class="cdn">

     

    <table id="example" class="datatable display nowrap cell-border compact" cellspacing="0" width="100%">

     

     

            <thead style="border-bottom: 0 solid; position:sticky; overflow-x: hidden;">