DataTable开启滚动与固定列后表头与表体错位如何解决

问题表现 #

开启滚动、固定列配置的DataTable组件，表头与表体列无法对齐，出现横向错位。

问题根因 #

原初始化代码存在重复配置问题，且组件初始化时DOM、数据未完全渲染完成，导致列宽计算偏差；固定列模式下表头、表体为独立渲染的容器，滚动条占位也会进一步放大宽度差。
原初始化代码如下：

$(document).ready(function () {
    initChartData();
    var table = $('#expenses').DataTable({
        scrollY: 400,
        scrollX: true,
        paging: false,
        fixedColumns: true, // 冗余重复配置
        fixedColumns: {
            left: 1,
        },
        order: [[0, 'desc']],
    });
});

修复方案 #

• 清理冗余配置，补充宽度控制参数
  删除重复的fixedColumns: true声明，添加autoWidth: false关闭组件默认的模糊宽度计算，同时在初始化完成回调中主动触发一次列宽重算，修正后的初始化代码：

  $(document).ready(function () {
      initChartData();
      var table = $('#expenses').DataTable({
          scrollY: 400,
          scrollX: true,
          paging: false,
          autoWidth: false,
          fixedColumns: {
              left: 1,
          },
          order: [[0, 'desc']],
          initComplete: function() {
              this.api().columns.adjust().draw();
          }
      });
  });
  

• 处理异步渲染、隐藏容器场景的重排
  如果initChartData()为异步加载数据逻辑，或表格放置在标签页、折叠面板等默认隐藏的容器中，必须在数据渲染完成、容器变为可见状态后，手动执行重算方法修正对齐：

  table.columns.adjust().fixedColumns().relayout();
  

• 添加CSS兜底修复滚动条占位差
  固定列模式下表头容器无滚动条、表体容器有滚动条，滚动条占位会导致宽度差，添加以下样式兜底：

  .dataTables_scrollHead {
      overflow: hidden !important;
  }
  .dataTables_scrollBody {
      scrollbar-gutter: stable;
  }
  

绝大多数同类错位问题都是宽度计算时机不对导致的，不要在DOM、容器尺寸、数据未稳定时初始化组件，主动调用重算方法即可解决。

内容的提问来源于stack exchange，提问作者Bochiekek