CSS table 行上的框阴影未正确显示
CSS box shadow on table row not displaying correctly
我在 table 行上添加了一个轻微的框阴影,当鼠标悬停在它上面时,它会更明显一些。它可以正常工作,但是当我添加交替行颜色时,它停止正确显示。
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" class 的较深颜色的行上方时,框阴影会正常显示,但对于较浅颜色的行,它只会显示阴影该行的顶部而不是底部。从第 2 行和第 4 行删除 "alt" class 修复它,但以交替行颜色为代价。是什么导致此行为发生,我该如何解决?
似乎 <tr>
的 z-index
不能像您想要的那样更改,以便阴影出现在具有背景颜色的行上方。
这是不完美的,但是您可以像您目前所做的那样在 <tr>
元素上设置 BG 颜色,然后设置悬停 box-shadow
在像这样的 <td>
内部元素上
.search-table table tbody tr:hover td {
box-shadow: 0px 0px 3px 0px #00000082;
}
它并不完美,因为单元格之间的内部水平边界也有阴影,但可以为每个单元格设置自定义阴影 size/position 并应用这些阴影。
另一种选择可能是保留现有内容并在 <tr>
上使用嵌入阴影,如下所示:
.search-table table tbody tr:hover {
box-shadow: inset 0px 0px 3px 0px #00000082;
}
最后一个复杂的解决方案可能是使用一些 JS 移动带有阴影的透明元素,并在悬停每个单元格时正确定位和调整大小。
或者...我能做的只是改变悬停时行的 BG 颜色而忘记阴影!
您可以通过将 transform: scale(1)
应用于悬停的行来解决框阴影被其他 table 行“隐藏”的问题:
.search-table table tbody tr:hover {
box-shadow: 0px 0px 3px 0px #00000082;
transform: scale(1);
}
我在 table 行上添加了一个轻微的框阴影,当鼠标悬停在它上面时,它会更明显一些。它可以正常工作,但是当我添加交替行颜色时,它停止正确显示。
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" class 的较深颜色的行上方时,框阴影会正常显示,但对于较浅颜色的行,它只会显示阴影该行的顶部而不是底部。从第 2 行和第 4 行删除 "alt" class 修复它,但以交替行颜色为代价。是什么导致此行为发生,我该如何解决?
似乎 <tr>
的 z-index
不能像您想要的那样更改,以便阴影出现在具有背景颜色的行上方。
这是不完美的,但是您可以像您目前所做的那样在 <tr>
元素上设置 BG 颜色,然后设置悬停 box-shadow
在像这样的 <td>
内部元素上
.search-table table tbody tr:hover td {
box-shadow: 0px 0px 3px 0px #00000082;
}
它并不完美,因为单元格之间的内部水平边界也有阴影,但可以为每个单元格设置自定义阴影 size/position 并应用这些阴影。
另一种选择可能是保留现有内容并在 <tr>
上使用嵌入阴影,如下所示:
.search-table table tbody tr:hover {
box-shadow: inset 0px 0px 3px 0px #00000082;
}
最后一个复杂的解决方案可能是使用一些 JS 移动带有阴影的透明元素,并在悬停每个单元格时正确定位和调整大小。
或者...我能做的只是改变悬停时行的 BG 颜色而忘记阴影!
您可以通过将 transform: scale(1)
应用于悬停的行来解决框阴影被其他 table 行“隐藏”的问题:
.search-table table tbody tr:hover {
box-shadow: 0px 0px 3px 0px #00000082;
transform: scale(1);
}