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

【问题标题】：Datatables Columns not aligning when using ScrollX, ScrollY使用 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...你是我唯一的希望...

【问题讨论】：

标签： datatables-1.10

【解决方案1】：

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

Chrome 91 update broke all table views

【讨论】：