悬停在行上时不显示行的底部阴影？答案

【问题标题】：bottom shadow of row is not displaying when hovered over row?悬停在行上时不显示行的底部阴影？
【发布时间】：2020-07-31 13:54:04
【问题描述】：

我用过数据表，

当我将鼠标悬停在未显示行底部阴影时，为什么？只显示左右阴影。

  table.dataTable tbody tr:hover {
                    
                   background-color: #fbfbfb; box-shadow: 0px 2px 18px 0px rgba(0,0,0,0.5); cursor: pointer; 
                   border-bottom:double;
                }

enter image description here

【问题讨论】：

我认为这是因为您在tr 中应用了阴影，而阴影在下一个tr 后面。如果您将鼠标悬停在您拥有的最后一个 tr 上，您会得到相同的结果吗？
haha tr 必须是 linline ，所以设置为 display:block;
你为什么不使用 css 网格老兄？
@Julio，在最后一行，我可以看到阴影，但在中间看不到
我使用您的代码和上面提供的答案创建了一个 codepen 作为示例。查看here

标签： html css bootstrap-4

【解决方案1】：

尝试相对定位行，将显示设置为块状，并在 tr:hover 中设置 z-index 以将当前表格行置于最前面。
例如：

table tbody tr:hover {
background-color:#13326b;
color:#ffffff;
text-shadow: 1px 2px #000000;
box-shadow: 0px 0px 10px #ff0000;
-webkit-box-shadow: 0px 0px 10px #ff0000;
-moz-box-shadow: 0px 0px 10px #ff0000;
z-index:100;
}
td, th { padding-left: 16px; min-width: 170px;  text-align: left; }
table tbody tr , table tbody td{
    height:100px;
}
tr{
  display: block;
  position:relative;
  background-color:#fff;
}

【讨论】：

我有影子但是，ui是伪装的
@pratik 尝试将 ui 的 z-Index 设置为比 tr:hover z-index 更大的值

【解决方案2】：

enter image description here

 table.dataTable { 
  box-sizing: border-box; 
}

 table.dataTable td, th { 
  width:100%
}

  table.dataTable tr {
  display: block; 

}
   table.dataTable tr:hover {     
  position: relative; 
  background-color: orange;  
  cursor: pointer; 
  box-shadow: 0px 2px 18px 0px rgba(0,0,0,0.5); 
  cursor: pointer; 
}

我使用上面的代码得到了阴影，但是 ui 是伪装的。

【讨论】：

@ChewySalmon，我用过上面的代码，我得到了影子，但 ui id 伪装了