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

我有一张桌子，包括：

第一列是固定的

t脚掌

tfoot的水平滚动条

具有隐藏的tbody水平滚动条

小提琴：

在这种情况下，当您滚动到右侧时，您将看到固定列的最后一行单元格（背景色：红色）被弄乱，因为水平滚动条是隐藏的

我的问题是：有没有办法纠正这个问题

顺便说一下：我不得不隐藏水平滚动条，因为它不能与滚动条同步

非常感谢

编辑：在Chrome中是相同的：

请检查

第一列是固定的

t脚掌

tfoot的水平滚动条

具有隐藏的tbody水平滚动条

这个问题已经解决了。 您的ans在下面的链接中给出

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

这里有一个部分解决方案。整个设置是不同表和div的巨大混合。由于某些原因，隐藏的滚动条对一些div仍然“有效”，即它们仍然占用空间，并在滚动其他元素时作出反应。也许对每个元素/容器进行非常非常仔细的尝试和错误处理可以解决整个问题，但对我来说，这似乎是预期的浏览器行为，只是“按原样”而已。但在webkit浏览器上，您可以执行以下操作：

div:not（.dataTables\u scrollFoot）：：-webkit scrollbar{
显示：无；
}

这将有效地禁用注入的

元素上所有隐藏（但不是真正隐藏）的滚动条，但将它们保留在要滚动的页脚元素上

但这只适用于：Chrome、Chrome、Safari、Opera和Android

Gecko（mozilla）曾经有一个类似的功能

——moz滚动条none

，但它被弃用并忽略了。好吧，有一种永久的呼声要求把它带回来

这也是Edge的情况，即。对于Edge来说，这是一个真正的希望，因为MS多次表示EdgeHTML应该与WebKit布局引擎完全兼容

---

因此，这是一个部分解决方案，可能覆盖85%，包括所有设备

OP希望滚动条位于页脚下方。这就是问题所在。这实际上是一个很好的问题。@davidkonrad是的。。你说得对。。但是关于身高，他还有另一个问题。。我认为这个问题已经在上面的回答中解决了。我看不出你在Fiddle中所说的问题。你使用什么浏览器？我正在使用Mozilla和IE，但问题仍然存在。。我在Chrome上测试，我没有发现问题。我也使用过Chrome，但问题依然存在。我附上图片。当你向右滚动时，你没有看到这样的混乱吗？禁用TBODY滚动条，你就会看到问题。非常感谢你的时间和回答，davidkonrad。它帮了我很多。大卫，只是尝试，它还隐藏了“.dataTables\u scrollBody”。有没有可能不隐藏它？@Delmonte，你是说

.dataTables\u scrollBody

中的垂直滚动条？或者哪个浏览器/平台…？是的，那个。。。Chrome浏览器中.dataTables\u滚动体中的垂直滚动条。这样更好吗

div:not（.dataTables\u scrollFoot）：not（.dataTables\u scrollBody）：-webkit滚动条{display:none；}

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