问题描述
$('#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>>",});
我非常需要新鲜的眼光，我花了大约 10 个小时试图找到问题，但没有找到。在上面的小提琴中，列没有对齐，这似乎是由于 ScrollX 和 ScrollY - 如果我将它们注释掉，一切都会对齐。过去，我知道将 ScrollX 和 ScrollY 与 fixedColumns 一起使用时会出现问题，但我认为已经解决了。另外，我至少有十几个其他报告使用了 ScrollX、ScrollY 和 fixedColumns 的组合，并且它们运行良好。
用 Leigh 公主的话说：帮我 Stack Overflow...你是我唯一的希望...
解决方法
DataTables 论坛上有人分享了一篇文章，解释了正在发生的事情，这与最新版本的 Chrome (91) 相关。有一个 stackoverflow 帖子已经解决了这个问题，并且（有点）提供了解决方案或概念证明。