表格行上的 CSS 框阴影未正确显示答案

【问题标题】：CSS box shadow on table row not displaying correctly表格行上的 CSS 框阴影未正确显示
【发布时间】：2019-03-07 14:22:08
【问题描述】：

当悬停在表格行上时，我在表格行上添加了一个轻微的框阴影，以便更加明显。它可以正常工作，但是当我添加交替的行颜色时，它会停止正确显示。

Here is a JSFiddle of the problem.

<div class="search-table">
<table>
  <tbody>
    <tr>
      <td>A1</td>
      <td>A2</td>
    </tr>
    <tr class="alt">
      <td>B1</td>
      <td>B2</td>
    </tr>
    <tr>
      <td>C1</td>
      <td>C2</td>
    </tr>
    <tr class="alt">
      <td>C1</td>
      <td>C2</td>
    </tr>
  </tbody>
</table>
</div>
<style>
.search-table {
    display: block;
    background-color: #535353;
    font: normal 12px/150% Arial, Helvetica, sans-serif;
    overflow: hidden;
    border: 1px solid #8C8C8C;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

.search-table a {
    color: #424242;
}

.search-table table {
    border-collapse: collapse;
    text-align: left;
    width: 100%;
    background-color: #ffffff;
}

.search-table table td, .search-table table th {
    padding: 3px 10px;
}

.search-table table thead th {
    background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #8C8C8C), color-stop(1, #7D7D7D) );
    background: -moz-linear-gradient( center top, #8C8C8C 5%, #7D7D7D 100% );
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#8C8C8C', endColorstr='#7D7D7D');
    background-color: #8C8C8C;
    color: #FFFFFF;
    font-size: 15px;
    font-weight: bold;
    border-left: 1px solid #A3A3A3;
}

.search-table table thead th:first-child {
    border: none;
}

.search-table table tbody td {
    color: #424242;
    border-left: 1px solid #DBDBDB;
    font-size: 1.25em;
    font-weight: normal;
    padding: 0.5em;
}

.search-table table tbody tr {
    z-index: 0;
}

.search-table table tbody tr:hover {
    box-shadow: 0px 0px 3px 0px #00000082;
    z-index: 1;
}

.search-table table tbody tr.alt {
    background: #EBEBEB;
    color: #424242;
}

.search-table table tbody td:first-child {
    border-left: none;
}

.search-table table tbody tr:last-child td {
    border-bottom: none;
}
</style>

如您所见，当使用“alt”类将鼠标悬停在较深颜色的行上方时，盒子阴影会出现，但对于较浅颜色的行，它仅在行的顶部显示阴影，而不是在底端。从第 2 行和第 4 行删除“alt”类可以修复它，但代价是交替行颜色。是什么导致了这种行为，我该如何解决？

【问题讨论】：

仅供参考，您可以使用 tr:nth-child(even) CSS 选择器，而不是将 .alt 类添加到每个其他表格行！

标签： css box-shadow

【解决方案1】：

您可以通过将transform: scale(1) 应用于悬停的行来解决盒子阴影被其他表格行“隐藏”的问题：

.search-table table tbody tr:hover {
    box-shadow: 0px 0px 3px 0px #00000082;
    transform: scale(1);
}

【讨论】：

简单，就像一个魅力。我认为这应该是最受好评的答案。

【解决方案2】：

似乎<tr> 的z-index 无法按照您的意愿进行更改，以便阴影出现在具有背景颜色的行上方。

这是不完美的，但是您可以像现在这样在<tr> 元素上设置BG 颜色，然后像这样在内部<td> 元素上设置悬停box-shadow

.search-table table tbody tr:hover td {
    box-shadow: 0px 0px 3px 0px #00000082;
}

这并不完美，因为单元格之间的内部水平边框也会产生阴影，但可以为每个单元格设置自定义阴影大小/位置并应用这些。

另一种选择可能是保留您所拥有的并在<tr> 上使用嵌入阴影，如下所示：

.search-table table tbody tr:hover {
    box-shadow: inset 0px 0px 3px 0px #00000082;
}

最后一个复杂的解决方案可能是使用一些 JS 来移动一个带有阴影的透明元素，并在悬停每个单元格时正确定位和调整它的大小。

或者......我能做的只是改变悬停时行的背景颜色，忘记阴影！

【讨论】：