DataTables - scrollX verursacht gequetschte Kopfzeile

Question

So verwende ich DataTables mit dem scrollX Parameter, der auf wahr gesetzt wird, aber es verursacht, dass die thead Spalten zusammenbrechen.

Hinweis: Die Datentabelle wird innerhalb eines Bootstrap-Modals als Teil eines Reaktionsprojekts angezeigt.

Wie kann ich dieses Problem lösen?

Wenn ich auf eine der Spalten klicke, wodurch sie aktualisiert wird, behebt sie sich selbst. Auch wenn ich die scrollX entferne, kollabiert es auch nicht.

Initialisation Code:

$('#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

In Datentabelle Initialisierung umfassen folgende Eigenschaft.

autoWidth : true 

Zusammen mit Add dieses

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

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

Answer 2

Datentabelle mit dem folgenden Code initialisiert werden soll horizontales Scrollen zu erreichen:

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