DataTables启用ScrollX、ScrollY与fixedColumns时列对齐异常问题求助
Problem Context
I’ve spent around 10 hours troubleshooting this issue with no progress at all—really need fresh eyes and ideas from the community! In my test scenario, the columns of my DataTable are misaligned badly. After testing, I’ve narrowed it down to the scrollX and scrollY properties: if I comment both out, the column alignment goes back to normal immediately.
I know there were compatibility issues between ScrollX/ScrollY and fixedColumns in older DataTables versions, but I assumed those bugs had been fixed by now. What’s even more confusing is that I have over 10 other reports using the exact same combination of these three features (scrollX, scrollY, fixedColumns) and they all work perfectly without any alignment problems.
Initialization Code
$('#tblCCR').DataTable({ paging: false, ordering: false, sorting: false, fixedColumns: { leftColumns: 3 }, scrollX: true, scrollY: '55vh', scrollCollapse: true, buttons: [ 'excelHtml5', { extend: 'pdfHtml5', orientation: 'landscape', widths: 'auto', customize: function(doc) { doc.defaultStyle.fontSize = 4; doc.styles.title.fontSize = 4; doc.styles.tableHeader.fontSize = 4; doc.styles.tableFooter.fontSize = 4; doc.styles.tableHeader.alignment = 'left'; doc.styles.title.bold = true; doc.styles.tableHeader.bold = true; doc.styles.tableHeader.color = '#ffffff'; doc.styles.tableHeader.fillColor = '#666666'; doc.styles.tableBodyOdd.fillColor = '#ffffff'; doc.styles.tableBodyEven.fillColor = '#e9e9e9'; } }, ], language: { emptyTable: "No data available - Have you selected a class or cohort?" }, dom: "<'row'<'col-sm-12 text-right'B>>" + "<'row'<'col-sm-12'tr>>", });
I’m totally stuck on why only this specific table is having this issue. Could anyone help me dig into the possible root causes here?
内容的提问来源于stack exchange,提问作者JimmyG

