带有悬停内容的可滚动表格答案

【问题标题】：Scrollable table with hover content带有悬停内容的可滚动表格
【发布时间】：2018-11-15 02:55:03
【问题描述】：

我现在在Codepen 中写下的任务有问题。

.content {
  display: none;
  position: absolute;
}
td:hover .content {
  display: block;
  position: absolute;
  width: 250px;
  z-index: 1;
  background-color: #ffcce0;
  color: black;
  border: 4px solid #ffb3d1;
  border-radius: 10px;
}

当我将鼠标悬停在图标上时，内容会显示它应该如何显示，但是当我向下或向一侧滚动并再次悬停相同的图标时，内容的位置会远离原始位置。在 Mozilla 中它运行良好！我该如何解决这个问题？这似乎是 Chrome 的一个错误，对吧？（如果可能，解决方案应该没有 Javascript）

因此，如果我向下或/和滚动到侧面，然后将鼠标悬停在绿色图标上，则内容不会显示在图标下方。我可以通过给出 td 的相对位置来解决这个问题，但是当图标位于表格的底部或右侧时，内容不会显示。它有点藏在桌子后面

【问题讨论】：

你能告诉我们图片/gif的问题是什么，或者更好地解释一下吗？我看到消息框出现在悬停状态，但我不明白它的问题。

标签： html css html-table position overflow

【解决方案1】：

我想出了这个解决方案：Codepen

我为您的table 提供了position: relative;，以便.content 元素相对于其父元素(table)。
我还为您的.content 设置了样式，使其在悬停时非常适合table。

body {
  background-color: #ffe6e6;
}
.container {
  position: relative;
  width: 700px;
  margin: auto;
  padding: 10px;
}
.table {
  background-color: #ffffcc;
}
.scroll {
 overflow-x: auto;
 overflow-y: auto;
 max-height: 200px;
 width: 100%;
}
.green{
  color: lime;
}
td {
  text-align: center;
}
.content {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  height: 100px;
  width: 250px;
  z-index: 1;
  background-color: #ffcce0;
  color: black;
  border: 4px solid #ffb3d1;
  border-radius: 10px;
}
td:hover .content {
  display: block;
}

【讨论】：

感谢您的回答，但我也尝试给出 td 的相对位置，但底部或右侧的绿色图标隐藏在桌子后面。
不幸的是，这是表格设计的问题。我用一个新建议更新了我的答案；将内容放在表格下方，使其始终可见并且始终位于同一位置。让我知道你的想法:)
是的，因为在图标下太难了，如果没有其他解决方案，我可能会使用您的建议:)
谢谢。如果您真的想在悬停的项目下放置内容消息框，我建议您以不同的方式设置整个表格的样式。但这取决于你:)

【解决方案2】：

您可以通过将position: relative; 添加到您的 td 元素来将弹出窗口放置在您想要的位置。这使得弹出窗口的位置相对于 td。

但是这会导致表格底部或右侧的 td 元素出现问题；它们将隐藏在滚动的 div 中。

AFAIK 解决这个问题的唯一方法是通过 Javascript，这就是例如 Bootstrap 使用 JS 来定位它们的原因。（Bootstrap 使用 Popper.js 库https://popper.js.org/）

【讨论】：