具有背景颜色的容器 div 隐藏了 table 个单元格

Container div with background-color hides table cells

我试图制作一个 tr 悬停样式，将框阴影效果应用于您悬停的行，但我发现如果我将 table 在具有背景颜色的 div 中。这显然是因为 td 有一个 z-index : -1，但这是我发现使 box-shadow 起作用的唯一方法。

有什么想法可以让 table 出现，并在悬停时保持框阴影样式吗？

我转载在这里： https://jsfiddle.net/pjz43a52/5/

我想你想设置鼠标悬停时出现 td，对吧？ 只需再添加一行，悬停时将 z-index 重置为 0 以上。

table tr:hover { z-index: 1; }

给 table 本身一个 z-index，在 table 和 div 之间创建一个额外的“层”，即 table 单元格与负 z-index 可以驻留，这样它就不会隐藏在 div 背景后面。

table {
  position: relative;
  z-index: 1;
  border-spacing: 0px;
  border-bottom: 1px solid black;
}

https://jsfiddle.net/pjz43a52/6/

这是因为 tds 的 z-index 为 -1，因此它们在容器下方呈现 div。

要解决这个问题，我们应该同时提供容器 div 和 <table> 元素 position: relative，并将 .container 设置为 z-index: 0 和 <table> 有一个 z-index: 1。

这些 z-indexes 将强制 table 及其子项在容器上方呈现。 td 的索引仍将位于行下方，但现在将显示在容器上方。