Добавить тень для теней в CSS?

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 и посмотреть, что происходит.

Вы также можете попробовать: до и: после.