数据表列标题对齐问题答案

【问题标题】：datatable column header alignment issue数据表列标题对齐问题
【发布时间】：2018-08-03 15:51:43
【问题描述】：

问题在于 chrome 和 IE。如果我们在制作数据表时添加滚动选项，则表头与表不对齐。否则没关系。

"scrollY" : 200, "scrollCollapse" : true, "sScrollX" : "100px",

【问题讨论】：

标签： datatable header alignment

【解决方案1】：

您好，我们可以通过添加我们自己的自定义滚动工具来解决此问题。

步骤:)
1. 在制作数据表时删除滚动选项。
2. 用 div 包裹表格： $('#'+tableId).wrap("<div class='scrolledTable'></div>");
3. 为 scrolledTable 类提供 css 属性。
.scrolledTable{ 溢出-y：自动；明确：两者； }
1. 完成。

【讨论】：

你拯救了我的一天。非常感谢。
尝试了很多方法来修复它 - 这就是解决方案！谢谢

【解决方案2】：

这可能会有所帮助，

$(".dataTables_scrollHeadInner").css({"width":"100%"});
$(".table ").css({"width":"100%"});

我将它放在我的 drawCallback 函数中，这对我有用（你可以将它添加到 yourstyle.css）

【讨论】：

【解决方案3】：

如果表格的 html 是以编程方式创建的，我需要在创建 html 和创建表格本身之间有一个延迟。延迟可能需要针对不同的浏览器进行更改。

$(tableID + 'Table').html('<table class="display" id="' + tableID.substring(1) + '"></table>');
this.show = function (onclick) {
    // onclick is the function (if any) to be run when a row is clicked
    var defs = this.tableDefs;
    // workaround delay to allow column headers to be resized. Needs a delay after being created, before being shown
    setTimeout(function () {
        table = $(tableID).DataTable(defs);
        $(tableID + ' tbody tr').on('click', function () {
            var nTds = $('td', this);
            onclick(nTds);
        });
    }, 200);

【讨论】：

【解决方案4】：

随便写，

$(".dataTables_scrollBody").width($(".dataTables_scrollHead").width());

也写"scrollX": true

【讨论】：

【解决方案5】：

你可以这样做：

$('#DataTableID').DataTable({
  //"scrollX": true,            
  "initComplete": function (settings, json) {  
    $("#DataTableID").wrap("<div style='overflow:auto; width:100%;position:relative;'></div>");            
  },
});

【讨论】：