Box-shadow on tbody

by chriswt

HTML

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<table class="table">
    <thead>
    <tr>
        <td>First</td>
        <td>Last</td>
        <td>Age</td>
    </tr>
    </thead>

    <tbody>
    <tr>
        <td>Jill</td>
        <td>Smith</td>
        <td>50</td>
    </tr>
    <tr>
        <td>Eve</td>
        <td>Jackson</td>
        <td>94</td>
    </tr>
    </tbody>
</table>

SCSS

body {
  padding: 15px;
}

.table {
  padding: 5px;
  box-shadow: none;
  position: relative;

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

tbody tr:first-child td {
  border: none;
}

thead {
  height: 36px;
}