CSS box shadow on table row not displaying correctly - css

Question

I have added a slight box shadow to a table row when it is being hovered on so that it is a bit more apparent. It works as it should, but when I add alternating row colors, it stops displaying correctly.
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>
As you can see, the box-shadow appears as it should when hovering above the darker colored rows with the "alt" class, but for lighter colored rows,it only displays the shadow on the top of the row and not on the bottom. Removing the "alt" class from the 2nd and 4th rows fixes it, but at the cost of alternating row colors. What is causing this behavior to happen, and how can I fix it?

Answer 1

You can fix the problem of the box shadow being "hidden" by other table rows by applying transform: scale(1) to the hovered row:
.search-table table tbody tr:hover {
box-shadow: 0px 0px 3px 0px #00000082;
transform: scale(1);
}

Answer 2

it seems that the z-index of a <tr> cannot be altered like you want so that the shadow appears above the rows with a background color.
This is imperfect, but you could set the BG colors on the <tr> elements like you are currently doing, and then set the hover box-shadow on the inner <td> elements like this
.search-table table tbody tr:hover td {
box-shadow: 0px 0px 3px 0px #00000082;
}
It's not perfect since the inner horizontal borders between cells also gets the shadows, but it might be possible to set a custom shadow size/position per cell and have those applied.
Another alternative might be to keep what you have and use an inset shadow on the <tr> like this:
.search-table table tbody tr:hover {
box-shadow: inset 0px 0px 3px 0px #00000082;
}
And then a final complex solution might be to use some JS to move a transparent element with a shadow around and position & size it correctly upon hovering each cell.
or... what I could do it just change the BG color of the row on hover and forget about the shadows!