Question

我在div内有一个表，该表允许水平和垂直滚动。该表具有粘性标题，如果将鼠标悬停在某个单元格上，则相应的行和列将突出显示。悬停一个单元格后，我还需要一个“弹出窗口”来覆盖桌面单元格。

那是可行的，但是因为我的容器是可滚动的，所以“弹出窗口”被剪切了而不是出现在其外部。 “弹出窗口”只是一个div样式，显示在单元格上方。我在这里摆弄一个小提琴来展示我在做什么： https://jsfiddle.net/u4r7hvp8/1/

jquery：

//sticky header
$(".hm-table").each(function() {
  $(this).wrap("<div class='scrollable'></div>");
  $(this).clone().find("tbody").remove().end().insertBefore(this);
});


$("table").on('mouseover mouseleave', 'td', function(e) {
  if (e.type == 'mouseover') {
    //highlight row
    $(this).parent().addClass("hover");
    //highlight column
    $(this).closest('table').find("col").eq($(this).index()).addClass("hover");
    //expand column head cell
    $('.hm-table').find("tr:first").find(".target-1").eq($(this).index()).removeClass("hidden");
    $('.hm-table').find("tr:first").find(".target-1").eq($(this).index()).addClass("title-1");
  } else {
    //remove row highlight
    $(this).parent().removeClass("hover");
    //remove column highlight
    $(this).closest('table').find('col').eq($(this).index()).removeClass("hover");
    //remove column head expand
    $('.hm-table').find("tr:first").find(".target-1").eq($(this).index()).addClass("hidden");
    $('.hm-table').find("tr:first").find(".target-1").eq($(this).index()).removeClass("title-1");
  }
});

CSS：

.scrollable {
  overflow-x: auto;
  overflow-y: auto !important;
  max-height: 200px;
}

.scrollable table:nth-child(1) {
  position: sticky;
  left: 0;
  top: 0;
  background-color: #fff;
  margin-bottom: 0;
  z-index: 1001;
}

.scrollable table:nth-child(1) tbody {
  visibility: collapse;
}

.scrollable table:nth-child(2) thead {
  visibility: collapse;
}

.hover {
  background-color: #3a3f51;
}

.title-1 {
  display: block;
  position: absolute;
  top: -31px;
  left: -22px;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
  width: 80px !important;
  height: 67px !important;
  background: #eaeaea;
  border-radius: 5px;
  padding-top: 5px;
  z-index: 1005;
}

有人能帮助我让这个“弹出窗口”完全显示在桌子上，而不被div砍掉吗？

如何使div出现在滚动容器之外？

0 个答案: