数据表标题和正文未对齐

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());
});

执行此操作后，所有标头及其数据都将对齐。当我们水平滚动数据表时，效果是可见的。

我该如何解决这个问题。