Почему фоновый цвет перекрывает коробку-тень?

Question

У меня есть таблица с ячейками, которые имеют background-color. Я пытаюсь установить box-shadow для thead, но фон ячеек в первом столбце перекрывает тень. Я попытался установить разные значения z-index и position: relative, но безрезультатно.

.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"> 
 
     <a href="#">Link 1</a> 
 
     </td> 
 
     <td>Package 1</td> 
 
     <td>Price 1</td> 
 
    </tr> 
 
    <tr> 
 
     <td class="item-cell"> 
 
     <a href="#">Link 2</a> 
 
     </td> 
 
     <td>Package 2</td> 
 
     <td>Price 2</td> 
 
    </tr> 
 
    <tr> 
 
     <td class="item-cell"> 
 
     <a href="#">Link 3</a> 
 
     </td> 
 
     <td>Package 3</td> 
 
     <td>Price 3</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Кстати, тень работает в Firefox, но не работает в других браузерах.

Firefox [image]

Chrome, Opera, Edge, IE11 [image]

Так как реализовать тени для THEAD?

Спасибо.

Answer 1

z-index добавить negative на td

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

Answer 2

Вы можете изменить это:

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); 

к этому:

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);