数据表列标题对齐问题

Posted 2021-05-04

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

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

答案

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

• 脚步：） 在制作数据表时删除滚动选项。 用div包装表：$('#'+tableId).wrap("<div class='scrolledTable'></div>"); 给scrollledTable类赋予css属性。 .scrolledTable {overflow-y：auto;明确：两者; } 完。

另一答案

这可能有所帮助，

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

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

另一答案

如果以编程方式创建表的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);

另一答案

写吧，

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

还写"scrollX": true

另一答案

你可以这样做：

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