jquery datatables 固定列在 IE 中未对齐

Posted 2023-03-06

【中文标题】jquery datatables 固定列在 IE 中未对齐

【英文标题】：jquery datatables fixed columns not aligning in IE

【发布时间】：2017-02-14 21:29:49

【问题描述】：

如果您在 IE 10 中检查固定列在向下滚动时不会与正文行对齐，在 chrome 中当您从右滚动到底部时，固定列不会与正文对齐。

我尝试过使用以下 css，但它不起作用。会不会是我在桌子上的边框和内边距？

.DTFC_LeftBodyLiner
    top: 2px !important;

jsfiddle

更新

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

使用@Dekel 代码更新

https://jsfiddle.net/a1mrp2k8/1/ 缩放标题列时删除行

【参考方案1】：

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

来自official documentation：

请注意，FixedHeader 当前与启用了 DataTables 滚动功能的表不兼容 (scrollX / scrollY)。请参阅compatibility table 了解完整的兼容性详细信息。

【讨论】：

是否有任何解决方法可以在不使用滚动的情况下获得相同的效果

【参考方案2】：

我设法修复了 Chrome 和 Firefox。 此解决方案也适用于 IE 10&11（但仅在您第二次上下滚动时。仍在尝试修复此问题...）。

一般的想法是获取原始标题的宽度/高度值并将它们设置为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/

【讨论】：

我已经尝试过了，但是如果缩放不同，对齐似乎会关闭。尝试将浏览器缩放设置为 110% 重新加载页面并查看第一对列（IE/chrome）。在 chrome 中，顶部标题行下降到 110% 的第二行

在我看来，它没有拾取小数宽度数字。第一列是 169.43px，但它只拾取 169