Question

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

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

Answer 1

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

步骤：）
1. 在制作数据表时删除滚动选项。
2. 用div包装表格： $('#'+tableId).wrap("<div class='scrolledTable'></div>");
3. 为scrolledTable类提供css属性。

Answer 2

这可能有所帮助，

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

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

Answer 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);

Answer 4

写一下，

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

也写"scrollX": true

Answer 5

您可以这样做：

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

数据表列标题对齐问题

5 个答案: