DTFC_LeftBodyLiner & DTFC_LeftBodyWrapper width difference cause fixed columns misalignment

rohinivk

I have a datatables:
$('#tblResponses').DataTable({ "data": arrDataTblRow, "autoWidth": false, "scrollX": true, "columns":arrTblColmnDefs, "scrollY": 400, "deferRender": true, "scrollCollapse": true, "scroller":true, "fixedColumns": { leftColumns: 2 }, "initComplete": function(){ } });

My headers:
"<thead><tr><th rowspan="2">Date</th><th rowspan="2">User Name</th><th rowspan="2">Name</th><th rowspan="2">Email</th><th rowspan="2">Address</th><th rowspan="2">City</th><th colspan="2">Gender</th><th colspan="4">Do you have?</th><th colspan="2">Have you?</th><th colspan="2">Have you?</th><th colspan="2">Are you?</th><th colspan="2">Have y?</th><th colspan="2">Do you ? </th><th colspan="2">Are you ?</th><th colspan="1">Demo</th></tr><tr><th>Demo</th><th>Demo</th><th>Demo</th><th>Demo</th><th>Demo</th><th>Demo</th><th>Demo</th><th>Demo</th><th>Demo</th><th>Demo</th><th>Demo</th><th>Demo</th><th>Demo</th><th>Demo</th><th>Demo</th><th>Demo</th><th>Demo</th><th>Demo</th><th>Demo</th></tr></thead>"

There were CSS problems with this configuration. Adding following CSS worked.
.dataTables_wrapper .dataTable{
margin: 0px !important;
}

But now there was a misalignment with first column particularly with screen sizes equal to or less than 1366 width.
Tried adding following CSS since I discovered that "DTFC_LeftBodyLiner" and "DTFC_LeftBodyWrapper" have slight difference in widths.
@media (max-width:1366px) {
.DTFC_LeftBodyLiner{
/width: inherit !important;/
/padding-right:0px !important;/
/overflow: hidden !important;/
}
}

But it further caused CSS issues. Please help

rohinivk

     datatable.columns.adjust()
                .fixedColumns().relayout();

have added this but did not help

colin

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin