Why background-color overlap the box-shadow? - html

Question

I have a table with cells that have a background-color. I'm trying to set the box-shadow for the thead, but the background of a cells in first column overlaps a shadow. I tried to set a different z-index values and position: relative, but to no avail.
.results-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
table-layout: fixed;
}
.results-table th,
.results-table td {
padding: 1em;
width: 96px;
border-left: 1px solid rgba(34, 36, 38, 0.1);
border-top: 1px solid rgba(34, 36, 38, 0.1);
}
.results-table thead {
box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
position: relative;
}
.results-table thead th {
background: #E0E0E0;
border-bottom: 1px solid rgba(34, 36, 38, 0.1);
}
.results-table tr:first-child td,
.results-table tr:first-child th {
border-top: none;
}
.results-table tr th:first-child,
.results-table tr td:first-child {
border-left: none;
}
.item-cell.item-cell {
width: 128px;
}
td.item-cell.item-cell {
background: lightgreen;
}
<table class="results-table">
<thead>
<tr>
<th class="item-cell">
Item
</th>
<th>
Package
</th>
<th>
Price
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="item-cell">
Link 1
</td>
<td>Package 1</td>
<td>Price 1</td>
</tr>
<tr>
<td class="item-cell">
Link 2
</td>
<td>Package 2</td>
<td>Price 2</td>
</tr>
<tr>
<td class="item-cell">
Link 3
</td>
<td>Package 3</td>
<td>Price 3</td>
</tr>
</tbody>
</table>
By the way, a shadow works in Firefox, but does not work in other browsers.
Firefox [image]
Chrome, Opera, Edge, IE11 [image]
So how to implement a shadow for the thead?
Thanks.

Answer 1

add z-index negative on td
.results-table td{
position: relative;
z-index: -1;
}

Answer 2

You can change this :
box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
to this :
box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
-webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
-moz-box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);

Answer 3

thumbs up for Answer # 2. But there is new solution for this old problem i.e clip-path
body {
background: #f7f7f7;
}
.container {
width: 500px;
}
.item {
background: #fff;
height: 50px;
box-shadow: inset 0 1px #000;
/* Solution # 1 Starts */
/* z-index: -1;
position:relative */
/* Solution # 1 Ends */
/* Solution # 2 Starts */
clip-path: inset(0 1px 1px);
/* Solution # 2 End */
}
.cell {
box-shadow: inset 0 -1px #000;
/* box-shadow: 0 1px #000; */
}
<div class="container">
<div class="cell">
<div class="item">ITEM 1</div>
<div class="item">ITEM 2</div>
<div class="item">ITEM 3</div>
</div>
</div>