在CSS中添加box-shadow到tbody？

Question

我正在尝试重新创建我在Photoshop模型中制作的材质设计表：

除了投影外，我得到了我想要的一切。当我在tbody元素上应用阴影时，它会显示在Firefox中，但不会显示在Chrome或Edge中。如果我同时应用“display：block”样式，它会显示。但是，这会删除默认的“display：table-row-group”样式，从而有效地破坏了表的结构。如何在不影响布局其余部分的情况下添加投影？

* {
  font-family: Roboto, Arial;
}

body {
  background: #f8f8f8;
}

table {
  border-collapse: collapse;
  width: 100%;
}

th {
  font-weight: normal;
  opacity: .7;
  text-align: left;
  padding-left: 20px;
  padding-bottom: 10px;
}

td {
  padding: 20px;
}

tbody tr:nth-child(even) {
  background: rgba(128,128,128,.05);
}

tbody {
  background: #fff;
  
  /* This doesn't work unless "display: block" is applied, which ruins the structure */
  box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
  -moz-box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
  -webkit-box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
}

.grey {
  opacity: .5;
}

.green {
  color: #4caf50;
}

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Date</th>
      <th>Grade</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>You</td>
      <td>Today, 4:12 PM</td>
      <td class="green">92%</td>
    </tr>
    <tr>
      <td>John Smith</td>
      <td>Today, 3:28 PM</td>
      <td class="grey">Hidden</td>
    </tr>
    <tr>
      <td>Bobby Newport</td>
      <td>Yesterday</td>
      <td class="grey">Hidden</td>
    </tr>
    <tr>
      <td>Jim Halpert</td>
      <td>2 days ago</td>
      <td class="grey">Hidden</td>
    </tr>
    <tr>
      <td>Detlow Coffin</td>
      <td>2 days ago</td>
      <td class="grey">Hidden</td>
    </tr>
  </tbody>
</table>

Answer 1

我在这个问题上花了几个小时，最后一个工作解决方案没有打破表格布局。但现在我想起来，flexbox可能会简单得多......

table {
  position: relative;
}

table:after {
  content: '';
  position: absolute;
  box-shadow: 0 2px 4px 0 rgba(37, 37, 37, 0.2); // your box-shadow
  left: 0;
  right: 0;
  top: 36px; // height of your table header
  bottom: 0;
  z-index: -1;
}

这是小提琴：https://jsfiddle.net/jitowix/o2gx7sc4/

Answer 2

添加

的属性

display:table;

或

display:inherit;

到 tbody ，看看会发生什么。

你也可以尝试：之前和之后。