DataTables：当 tbody 的滚动条被隐藏时，固定列被弄乱了

Question

我有一个 table 其中包括：

第一列已修复
英尺
tfoot水平滚动条
隐藏了tbody的水平滚动条。

Fiddle: https://jsfiddle.net/jbeteta/6sxh3gbk/12/

    $(function() {
              $('#example').DataTable({         
            "fnInitComplete": function () {
                        // Disable scrolling in Head
                        $('.dataTables_scrollHead').css({
                            'overflow-y': 'hidden !important'
                        });

                        // Disable TBODY scroll bars
                        $('.dataTables_scrollBody').css({
                            'overflow-y': 'scroll',
                            'overflow-x': 'hidden',
                            'border': 'none'
                        });

                        // Enable TFOOT scoll bars
                        $('.dataTables_scrollFoot').css('overflow', 'auto');

                        //  Sync TFOOT scrolling with TBODY
                        $('.dataTables_scrollFoot').on('scroll', function () {
                            $('.dataTables_scrollBody').scrollLeft($(this).scrollLeft());
                        });

                    },
                scrollX: true,
                paging: true,
                fixedColumns: {
                  leftColumns: 1
                }
 });
        });

在那种情况下，当你滚动到右侧时，你会看到固定列（背景颜色：红色）的最后一行单元格被弄乱了，因为水平<tbody>滚动条被隐藏了。

我的问题：有什么办法可以纠正这个问题吗？

顺便说一下：我不得不隐藏 <tbody> 水平滚动条，因为它没有与 <tfoot> 滚动条同步。

非常感谢

编辑：在 Chrome 中是相同的：

Answer 1

请检查..

第一列已修复
足
tfoot水平滚动条
隐藏了tbody的水平滚动条。

这个问题已经解决了。你的答案在下面 link..

$(function() {
      $('#example').DataTable({         
     scrollY:        "300px",
    scrollX:        true,
    scrollCollapse: true,
    paging:         false,
    fixedColumns:   {
        leftColumns: 1
    }
      });
    });

Fiddle

Answer 2

这是一个部分的解决方案。整个设置是不同表格和 div 的巨大组合。出于某种原因，对于几个 div，隐藏的滚动条仍然在 "effect" 中，即它们仍然占用 space 并在其他元素滚动时做出反应。也许真的非常仔细地尝试和错误 CSS-ing 在每个元素/容器上可以解决整个问题，但对我来说这似乎是预期的浏览器行为，只是 "as it is"。但是在 webkit-browsers 上你可以这样做：

div:not(.dataTables_scrollFoot)::-webkit-scrollbar { 
  display: none; 
}

https://jsfiddle.net/6sxh3gbk/19/

这将有效地禁用注入的 <div> 元素上所有讨厌的隐藏（但不是真正隐藏）滚动条，但将它们保留在我们要滚动的页脚元素上。

但这仅适用于 webkit browsers：Chrome、chromium、Safari、Opera 和 Android。

Gecko (mozilla) 曾经有一个类似的功能 -moz-scrollbars-none 但它已被弃用并被排除在外。 AFAIK 将它带回来是永久的呼声。

Edge也是如此，issue is still being raised。对于 Edge 来说，这是真正的希望，因为 MS 多次声明 EdgeHTML 旨在与 WebKit 布局引擎完全兼容。

这是一个部分解决方案，覆盖了大约 85%，包括所有设备。

DataTables：当 tbody 的滚动条被隐藏时，固定列被弄乱了

DataTables: When scroll bar of tbody is hidden, fixed column gets messed up

jquery

datatables

fixed-header-tables