使用 ScrollX、ScrollY 时数据表列未对齐

Posted 2023-05-09

【中文标题】使用 ScrollX、ScrollY 时数据表列未对齐

【英文标题】：Datatables Columns not aligning when using ScrollX, ScrollY

【发布时间】：2021-09-11 19:50:49

【问题描述】：

fiddle

$('#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 时存在问题，但我认为这已得到修复。另外，我至少还有十几个其他报表使用了 ScrollX、ScrollY 和 fixedColumns 的组合，并且它们运行良好。

套用李公主的话说：帮我 Stack Overflow...你是我唯一的希望...

【参考方案1】：

DataTables 论坛上的某个人分享了一篇解释正在发生的事情的帖子，它与最新版本的 Chrome (91) 相关。有一篇 *** 帖子已经解决了这个问题，并且（某种程度上）提供了解决方案或概念证明。

Chrome 91 update broke all table views