数据表标题和正文未对齐

Question

我在Angular 6项目中使用jquery数据表创建了一个数据表.在我的例子中,用户可以使用弹出窗体中的表格切换列.以下是弹出窗口:

当用户选择/取消选择相应的列标题并保存时,我执行以下步骤; 1.过滤数组以仅获取需要显示的标题
2.使用删除数据表

$(".data-table").DataTable().destroy();

3.使用以下方法重新初始化数据表:

var table = $(".data-table").DataTable({
    dom:
      "<'row'<'#tblnoitfy'>><'row'<'col-sm-4'l><'col-sm-8'p>>" +
      "<'row'<'col-sm-12'tr>>",
    fixedHeader: {
      header: true,
      footer: true
    },
    scrollY: "calc(100vh - 154px)",
    paging: false,
    scrollX: true,
    scrollCollapse: true,
    searching: false,
    bDestroy: true,
    bAutoWidth: true,
    bDeferRender: true,
    info: false,
    aaSorting: [],
    language: {
      emptyTable: " "
    }
  });

  $(".dataTables_empty").append(this.noDataHtml());
});

一旦我这样做,我的所有标题及其数据都会被错位.当我们水平滚动数据表时,效果是可见的.

我该如何解决这个问题.