Javascript DataTables-scrollX导致压缩标头

因此，我使用的DataTables将

scrollX

参数设置为true，但是这会导致thead列崩溃

注意：datatable作为react项目的一部分出现在引导模式中

我如何解决这个问题

当我单击其中一列，使其刷新时，它会自行修复。另外，如果我删除

scrollX

，它也不会崩溃

初始化代码：

$('#item-search').DataTable( {
          ajax: {
            "data": {
              type: "map_items",
              map_id: this.map_id
            },
            "dataSrc": (r) => {
              console.log(r);
              return r.data;
            },
            type: "POST",
            url: "src/php/search.php"
          },
          autoWidth : false,
          columns: [
            {
              "data": "brand"
            },
            {
              "data": "name"
            },
            {
              "data": "quantity"
            },
            {
              "data": "measurement"
            },
            {
              "data": "type"
            },
          ],
          dom: 'rtlip',
          language: {
            "info": "Showing page _PAGE_ of _PAGES_",
            "infoFiltered": ""
          },
          lengthMenu: [ 1, 2, 3 ],
          pageLength: 1,
          processing: true,
          responsive: true,
          scrollX: true,
          select: {
            style: "multi"
          },
          serverSide: true
      });

---

在数据表初始化中包括以下属性

autoWidth : true

加上这个

"fnInitComplete": function(oSettings) {
                        $( window ).resize();
                    }

 "fnDrawCallback": function(oSettings) {
      $( window ).trigger('resize');
    }

---

应使用以下代码初始化DataTable以实现水平滚动：

"sScrollX": "100%",
"sScrollXInner": "110%",
"bScrollCollapse": true,
"fixedColumns":   {
   "leftColumns": 1
}

$（'#DataTableID'）。DataTable({
//“scrollX”：正确，
“initComplete”：函数（设置，json）{
$（“#DataTableID”）.wrap（“”）；
},
});

这项工作在我的角度项目中进行

this.dtTarifas = {
      scrollX: true,
      autoWidth: false,
      lengthChange: false,
      responsive: false
}

---

我的package.json中有“angular datatables”：“7.0.0”

您是否查看了datatables支持论坛？“这个问题可能已经有答案了。”迪夫斯特在谷歌上搜索了我的问题的几个变体。大多数答案都是使用旧版本的。我应该注意，这个数据表作为react项目的一部分出现在引导模式中。所以当它不是模态的一部分时，它就工作了。更新了答案，注意我把autoWidth改为true

this.dtTarifas = {
      scrollX: true,
      autoWidth: false,
      lengthChange: false,
      responsive: false
}