Question

我正在使用jQuery DataTables插件。我有一个在流体宽度div内的桌子。我想要做的是让这个表能够在页面不再允许表格全宽时水平滚动。

我尝试使用DataTables水平滚动示例（http://datatables.net/examples/basic_init/scroll_x.html） - 但我发现它有问题并且无法正常工作（例如，我发现TH与TD不匹配）。我发现很多人在论坛上有同样的问题，有人建议在表格中添加父div并使用：

.parent { overflow-x: auto; overflow-y: hidden; }

这非常有效！我现在的问题是在我的桌子里面有一个小工具提示菜单因为溢出隐藏而被切断。

您可以在此处看到演示： http://jsfiddle.net/eMvf9/

你会看到底部翻转现在被切断了。但是，如果我从overflow-y: hidden中移除.parent，则会在Y轴上获取滚动条。

有没有办法解决这个问题？它必须是position fixed上的.s-roll的jQuery吗？

Answer 1

你可以在最后一个td hover上删除父母的溢出。

 $('tr:last td:last').hover(function(){
  $('.parent').css('overflow-y', 'auto');    
},function(){
  $('.parent').css('overflow-y', 'hidden');
});

<强> Demo

您还可以使用以下方法更改最后一个元素菜单的悬停选项：

 $('tr:last td:last .s-rollover').css('top', '-90px');

Answer 2

最后我不得不使用bootstraps弹出框而不是我想要的方式，因为我无法弄清楚自己做的逻辑。

这包括一个on on hover功能，并且还会使popstrap popover在popover框内保持悬停。

$('.s-roll').popover({
    html:true, 
    trigger: 'manual', 
    placement: 'left'        
}).on("mouseenter", function () {
    var _this = this;
    $(this).popover("show");
    $(".popover").on("mouseleave", function () {
        $(_this).popover('hide');
    });
}).on("mouseleave", function () {
    var _this = this;
    setTimeout(function () {
        if (!$(".popover:hover").length) {
            $(_this).popover("hide");
        }
    }, 100);
});

对于有兴趣的人：http://jsfiddle.net/eMvf9/6/

表有一个隐藏溢出的父级，它切断了我的悬停菜单

2 个答案: