数据表垂直滚动问题

Datatables vertical scroll issue

本文关键字：问题 滚动 垂直 数据表      更新时间：2023-09-26

我已经在datatables论坛上发布了这篇文章，但几天后没有回应。所以我希望这里的人至少能想出一个解决办法。

过去几天我一直在研究这个问题，但找不到任何解决方案。。。我有一个网站在搜索结果页面上使用了dataTables，所以它必须能够处理一些记录，或者很多记录。我想使用垂直滚动来确保无论找到多少记录，标题都保持可见，但这让我头疼。。。

请参阅下面的jsfiddle，它演示了我的问题：http://jsfiddle.net/kzgq1L25/2/

我初始化数据表如下：

$('#example').DataTable({
    "scrollX": true
    , "scrollY" : "500px"
    , "scrollCollapse": true
    , "paging": false
    , "searching": false
    , "ordering": true
});

这告诉它创建一个高度为500px的垂直滚动容器。"scollCollapse": true告诉它不要使垂直滚动容器500px，如果表本身不那么高（以避免空白）。

我的问题是，正如你所看到的，即使表的高度小于scrollYparameter中给定的高度，也总是会添加一个垂直滚动条。只有在同时使用"scrollCollapse": true时才会发生这种情况。在这个例子中，表只由2行组成，根据Chrome开发工具的说法，tbody元素只有62px大，我已经给dataTables提供了"scrollY": "500px"参数，所以我希望没有垂直滚动条。

关于如何解决这个问题有什么想法吗？

试试这个。

    .dataTables_scrollBody{ height:500px !important;}

当您从表元素中删除边距时，您的垂直滚动条问题也得到了解决，也在您的jsfiddle:中

table.dataTable {
    margin: 0;
}
相关文章：