DTFC_LeftBodyLiner & DTFC_LeftBodyWrapper width difference cause fixed columns misalignment

rohinivk

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

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 any of the following symptoms?</th><th colspan="2">Have you done any international travel in last 15 days?</th><th colspan="2">Have you been in contact with any person who's be diagnosed with COVID-19?</th><th colspan="2">Are you a healthcare professional</th><th colspan="2">Have you ever been tested positive of COVID-19?</th><th colspan="2">Do you have any pre-existing conditions such as high blood pressure, heart ailment, kidney ailment or fluctuating blood sugar?&nbsp;</th><th colspan="2">Are you currently in lockdown?</th><th colspan="1">TEXT FORMATTING</th></tr><tr><th>Male</th><th>Female</th><th>Cough</th><th>Fever</th><th>Runny Nose</th><th>Headache</th><th>Yes</th><th>No</th><th>Yes</th><th>No</th><th>Yes</th><th>No</th><th>Yes</th><th>No</th><th>Yes</th><th>No</th><th>Yes</th><th>No</th><th>OPTION FORMATTING</th></tr></thead>"

There were issues with CSS where fixed columns were misaligned. Added following CSS to fix it:

.dataTables_wrapper .dataTable{
margin: 0px !important;
}

It worked. But now there was a misalignment with first column. Upon digging further realised that DTFC_LeftBodyLiner and DTFC_LeftBodyWrapper have different widths.

Please help.