Chrome 78更新后DataTable固定列错位问题求助

嘿，这个问题我太熟了！当初Chrome 78刚推出来的时候，我维护的几个项目都踩过这个坑。本质原因是Chrome 78对CSS表格渲染和position属性的处理做了小调整，刚好命中了旧版DataTables FixedColumns插件的兼容性盲区。下面是亲测有效的解决方案：

最省心的方案：直接升级插件 #

DataTables官方在后续版本（比如1.10.20及以后，或者更晚的1.13.x系列）已经修复了这个Chrome专属的兼容性问题。直接把DataTables核心和FixedColumns插件升级到最新稳定版，大部分情况下问题会直接消失。

替换你项目里的引用文件就行，举个CDN的例子：

<!-- 核心样式 -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.7/css/jquery.dataTables.min.css">
<!-- 固定列样式 -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/fixedcolumns/4.3.0/css/fixedColumns.dataTables.min.css">
<!-- 核心JS -->
<script type="text/javascript" src="https://cdn.datatables.net/1.13.7/js/jquery.dataTables.min.js"></script>
<!-- 固定列JS -->
<script type="text/javascript" src="https://cdn.datatables.net/fixedcolumns/4.3.0/js/dataTables.fixedColumns.min.js"></script>

当然你也可以下载文件到本地引用，效果是一样的。

无法升级时的临时修复：自定义CSS覆盖 #

如果项目依赖限制不能升级插件，那就手动写CSS强制适配Chrome的新规则：

/* 强制固定列使用sticky定位，适配Chrome 78+的渲染逻辑 */
table.dataTable thead.fixedColumns,
table.dataTable tbody.fixedColumns {
    position: sticky !important;
    left: 0 !important;
    z-index: 10;
}

/* 修正固定列的宽度计算，避免错位 */
.DTFC_LeftBodyLiner, .DTFC_RightBodyLiner {
    width: auto !important;
}

.DTFC_LeftHeadWrapper table, .DTFC_RightHeadWrapper table {
    width: 100% !important;
}

/* 重置盒模型，防止自定义样式冲突 */
.DTFC_LeftBodyLiner *, .DTFC_RightBodyLiner *,
.DTFC_LeftHeadWrapper *, .DTFC_RightHeadWrapper * {
    box-sizing: border-box !important;
}

把这段CSS加到你的项目样式里，刷新后横向滚动表格，固定列应该就能正常对齐了。

额外检查点：排除自定义样式冲突 #

如果上面的方法还没解决，打开Chrome开发者工具，检查固定列的元素，看看是不是你的项目自定义表格样式（比如padding、width、box-sizing）在干扰DataTables的默认样式，找到冲突的规则调整一下就行。

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