0

I am using jquery data table. I am facing issue with fixed headers when I load large number of data the tbody and thead are not aligned. Here is my code.

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

                });

here is the image.

enter image description here

Here is the css I used on the page

.dataTable {
        width: 2082.22px !important;
    }

    .dataTables_scrollHeadInner {
        width: 2082.22px !important;
    }

    .thead-th {
        width: 250px !important;
    }

    .thead-th-upc {
        width: 120.6945px !important;
    }
  • Maybe it's not DataTable.net but your CSS theme, css can override your style of headers – Digital3D Dec 05 '19 at 10:15
  • Can you please share your css classes you wrote for it? – Shamshad Jamal Dec 05 '19 at 10:26
  • 1
    Does this answer your question? [datatable jquery - table header width not aligned with body width](https://stackoverflow.com/questions/17237812/datatable-jquery-table-header-width-not-aligned-with-body-width) – Dani Dec 05 '19 at 11:54
  • Find the below reference https://stackoverflow.com/questions/13178039/datatables-fixed-headers-misaligned-with-columns-in-wide-tables?rq=1 – Sri Harsha Dec 05 '19 at 11:57

1 Answers1

0

Your in page css overwrite your css for datatable. Please remove the following css

.dataTable {
        width: 2082.22px !important;
    }

    .dataTables_scrollHeadInner {
        width: 2082.22px !important;
    }

    .thead-th {
        width: 250px !important;
    }

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

May be it helps. For suggestion you need to load less data by using server side pagination. By doing this your application performance will be increase. #HappyCoding

Kamran Khan
  • 1,042
  • 10
  • 21