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

Question

我遇到了一个问题，我现在已经在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的位置相对来解决这个问题，但是当图标位于表格的底部或右侧时，内容不会显示。它隐藏在桌子后面

Answer 1

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

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

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

Answer 2

我提出了这个解决方案：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; } 。

   |column_a|column_b|column_c|
   |1       |2       |3       |
   |4       |2       |6       |
   |3       |1       |7       |  

And(/^I verify the structure$/) do |table|
  hashes = table.hashes
  hashes.each do |deeplink_url|
    if deeplink_url['column_b'] == '2'
    step('I verify that following transactions are reported', table)
  end
end