javascript - DataTables - scrollX 导致标题被压扁

Question

所以我在使用 DataTables 时将 scrollX 参数设置为 true，但它会导致 thead 列折叠。

注意:数据表作为 React 元素的一部分出现在 Bootstrap Modal 中。

我该如何解决？

当我单击其中一列时，导致它刷新，它会自行修复。此外，如果我删除 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
      });

Answer 1

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

autoWidth : true

加上这个

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

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