Javascript JQuery Datatable标头未与tbody对齐？

我有一组数据，这些数据应该显示在jquerydatatables中，并带有过滤和滚动选项，而不会丢失列标题。到目前为止，所有功能都正常工作，但列标题存在问题。如果单击链接并选中run example，您将看到问题。列标题在左侧，而tbody居中。我已经尝试解决这个问题并更改HTML代码，删除了一些JQuery表属性，但仍然没有成功。如果有人知道如何解决这个问题，或者如果我的代码有任何问题，请告诉我。下面是一个例子：

$（'btnGet'）。在（'click'，function（）上{
buildTable（）；
});
var数据表；
函数生成器（tblID）{
//设置-向每个页脚单元格添加文本输入
$（'rptTbl thead tr'）.clone（true）.appendTo（'rptTbl thead'）；
$（'rptTbl thead tr:eq（1）th'）。每个（函数（i）{
//var title=$（this.text（）；
$（this.html（“”）；
$（'input'，this）.on（'keyup change'，function（））{
if（dataTable.column（i）.search（）！==此.value）{
dataTable.column（i）.search（this.value.draw（）；
}
});
});
dataTable=$（'#'+tblID）.dataTable({
dom:'Bfrtip'，
按钮：[
“复制”、“csv”、“excel”、“打印”，
{
扩展：“pdfHtml5”，
定位：'景观'，
页面大小：“合法”
}
],
是的，
固定标题：{
标题：对，
页脚：对
},
是的，
滚动：“400px”，
对,，
i显示长度：25，
语言：{
“emptyTable”：“未找到任何记录。”
}
});
}
函数buildTable（）{
var htmlTbl='AreaCentralElasternCentralCentralCentralElasternCentral'；
$（'#rptData'）.empty（）.append（htmlTbl）；
可生成表（'rptTbl'）；
}

测试JQuery数据表
得到报告
回去

在dataTable选项中添加drawCallback函数

 dataTable = $('#' + tblID).DataTable({
    dom: 'Bfrtip',
    buttons: [
      'copy', 'csv', 'excel', 'print',
      {
        extend: 'pdfHtml5',
        orientation: 'landscape',
        pageSize: 'LEGAL'
      }
    ],
    orderCellsTop: true,
    fixedHeader: {
      header: true,
      footer: true
    },
    scrollX: true,
    scrollY: "400px",
    scrollCollapse: true,
    iDisplayLength: 25,
    drawCallback: function( settings ) {
      // Reset margin to 0 after datatable render
      var ele = document.querySelector('.dataTables_scrollBody'); 
      if(ele){
         ele = ele.querySelector('.dataTable');
         if(ele){
            ele.style.margin = 0; 
         }
     }
   },
    language: {
      "emptyTable": "No records were found."
    }
  });

---

在dataTable选项中添加drawCallback函数

 dataTable = $('#' + tblID).DataTable({
    dom: 'Bfrtip',
    buttons: [
      'copy', 'csv', 'excel', 'print',
      {
        extend: 'pdfHtml5',
        orientation: 'landscape',
        pageSize: 'LEGAL'
      }
    ],
    orderCellsTop: true,
    fixedHeader: {
      header: true,
      footer: true
    },
    scrollX: true,
    scrollY: "400px",
    scrollCollapse: true,
    iDisplayLength: 25,
    drawCallback: function( settings ) {
      // Reset margin to 0 after datatable render
      var ele = document.querySelector('.dataTables_scrollBody'); 
      if(ele){
         ele = ele.querySelector('.dataTable');
         if(ele){
            ele.style.margin = 0; 
         }
     }
   },
    language: {
      "emptyTable": "No records were found."
    }
  });

---

这解决了问题。我注意到桌子是向左对齐的。在我的例子中，tbody居中，thead在左边。有办法使桌子居中吗？另外，你能详细说明为什么会发生这个问题，以及margin到底做了什么来解决这个问题吗？不知道，但不知怎么的jquery ui css把datatable的默认css搞乱了。很公平。谢谢，这就解决了问题。我注意到桌子是向左对齐的。在我的例子中，tbody居中，thead在左边。有办法使桌子居中吗？另外，你能详细说明为什么会发生这个问题，以及margin到底做了什么来解决这个问题吗？不知道，但不知怎么的jquery ui css把datatable的默认css搞乱了。很公平。谢谢。我已经调查了您的问题，这些选项导致了您的问题：

scrollX:true，scrollY:400px，scrollCollapse:true

。如果您对它们进行注释，您将看到表格居中。但是，我没有找到一个很好的解决方案来解决这些选项所带来的问题。@D.Smania我能够检测到同样的问题，但如果包括它们，则没有解决方案。datatables css中出现了一些问题。只是一个警告，如果您正在将datatables与引导集成，那么您应该包括所有引导支持，而不是JQuery UI支持，这可能是问题的根源。阅读：。这同样适用于按钮扩展。@D.Smania您可以指定我所包含的库的确切关闭位置吗？我是否有一些不是必需的或者缺少的？我很确定你所做的是否是错误的，但是对于Bootstrap，Datatables插件有一套自定义CSS样式来代替，例如：

，这是JQuery UI的一种样式。因为您使用的是引导，所以我认为使用它更为连贯：

，仅此而已。这同样适用于替换与JQueryUI相关的其他源。我已经调查了您的问题，这些选项导致了您的问题：

scrollX:true，scrollY:“400px”，scrollCollapse:true

。如果您对它们进行注释，您将看到表格居中。但是，我没有找到一个很好的解决方案来解决这些选项所带来的问题。@D.Smania我能够检测到同样的问题，但如果包括它们，则没有解决方案。datatables css中出现了一些问题。只是一个警告，如果您正在将datatables与引导集成，那么您应该包括所有引导支持，而不是JQuery UI支持，这可能是问题的根源。阅读：。这同样适用于按钮扩展。@D.Smania您可以指定我所包含的库的确切关闭位置吗？我是否有一些不是必需的或者缺少的？我很确定你所做的是否是错误的，但是对于Bootstrap，Datatables插件有一套自定义CSS样式来代替，例如：

，这是JQuery UI的一种样式。因为您使用的是引导，所以我认为使用它更为连贯：

，仅此而已。这同样适用于替换与JQueryUI相关的其他来源。