Jquery DataTable列顺序未与固定标题对齐[重复]

Posted 2023-05-07

【中文标题】Jquery DataTable列顺序未与固定标题对齐[重复]

【英文标题】：Jquery DataTable columns order not aligned with fixed headers [duplicate]

【发布时间】：2020-03-30 05:51:09

【问题描述】：

我正在使用 jquery 数据表。当我加载大量数据时，tbody 和 thead 未对齐时，我遇到了固定标题的问题。这是我的代码。

 $('#tblProducts').DataTable(
                     "scrollY": 400,
                     "scrollX": true,
                     "paging": false,
                     "fixedColumns": 
                         leftColumns: 1
                     ,
                     "searching": false

                );

这是图片。

enter image description here

这是我在页面上使用的css

.dataTable 
        width: 2082.22px !important;
    

    .dataTables_scrollHeadInner 
        width: 2082.22px !important;
    

    .thead-th 
        width: 250px !important;
    

    .thead-th-upc 
        width: 120.6945px !important;
    

【问题讨论】：

可能不是 DataTable.net 而是你的 CSS 主题，css 可以覆盖你的标题样式

你能分享你为它写的css类吗？

这能回答你的问题吗？ datatable jquery - table header width not aligned with body width

找到下面的参考***.com/questions/13178039/…

【参考方案1】：

您的页面内 css 会覆盖您的 css 数据表。请删除以下css

.dataTable 
        width: 2082.22px !important;
    

    .dataTables_scrollHeadInner 
        width: 2082.22px !important;
    

    .thead-th 
        width: 250px !important;
    

    .thead-th-upc 
        width: 120.6945px !important;
    

可能会有所帮助。对于建议，您需要使用服务器端分页加载更少的数据。通过这样做，您的应用程序性能将会提高。 #快乐编码

【讨论】：

非常感谢它帮助我的列标题对齐。

这里太好了。