为什么背景颜色与盒子阴影重叠？

Question

我的表格中包含background-color的单元格。我尝试为box-shadow设置thead，但第一列中的单元格背景与阴影重叠。我尝试设置不同的z-index值和position: relative，但无济于事。

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

顺便说一下，影子可以在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);