Question

如果您在IE 10中检查固定列在向下滚动时与主体行不对齐，当您从右向下滚动时，固定列与主体不对齐。

我试过玩下面的css，但它不起作用。它可能是桌子上的边框和填充物吗？

.DTFC_LeftBodyLiner{
    top: 2px !important;
}

jsfiddle

更新

我有updated没有scrollx / y和固定列。但是浮动标题仍然没有排列

使用@Dekel代码更新

缩放标题列时删除行

https://jsfiddle.net/a1mrp2k8/1/

Answer 1

根据jQuery DataTables的作者，Extension FixedHeader与滚动功能不兼容。

来自official documentation：

请注意，FixedHeader目前不兼容启用了DataTables滚动功能的表格（scrollX / scrollY）。有关完整兼容性的详细信息，请参阅compatibility table。

Answer 2

我设法修复了Chrome＆amp; Firefox浏览器。
这个解决方案也可以在IE 10和11中使用（但只有在你第二次向上和向下滚动时仍然可以解决这个问题......）。

一般的想法是采用原始标题的宽度/高度值并将它们设置为新的＆＃34;假的＆＃34; fixedHeader扩展程序正在创建的标题你的问题是，因为它是一个表格，而单元格的内容会影响所有的定位 - 你不能只是克隆标题行（因为它们的宽度不一样），如果事件是您在每个单元格上设置了正确的宽度 - table布局可以更改它们，因此我们必须将单元格的布局更改为display: inline-block。

将其添加到js文件中（创建数据表后）：

$(document).on('scroll', function() {
    if ($('table.dataTable.fixedHeader-floating').length > 0) {
        if ($('table.dataTable.fixedHeader-floating').data('header-fix') == 'done') {
            return;
        }

        float_ths = $('table.dataTable.fixedHeader-floating th');
        $('table.dataTable thead:eq(0) th').each(function(i) {
            float_ths.eq(i).width($(this).width());
            float_ths.eq(i).height($(this).height());
        })
        $('table.dataTable.fixedHeader-floating').data('header-fix', 'done')
    }
});

将此添加到您的CSS文件中：

table.fixedHeader-floating th {
    display: inline-block;
    height: 100%;
}

这是一个工作版本：
https://jsfiddle.net/9n6zty8t/

jquery datatables固定列未在IE中对齐

2 个答案: