title: css box shadow on thead that has sticky position
body: <p>I'm styling a table with CSS, I want my <code>th</code> has box shadow when its position is sticky. I've tried but I want to get rid the shadow that's in the right (so I'm expecting the shadow only appear in the bottom of the <code>th</code> element)</p>
  <p><a href="https://i.stack.imgur.com/K58cU.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/K58cU.png" alt="enter image description here" /></a></p>
  <p>this is my table CSS</p>
  <pre class="lang-css prettyprint-override"><code>table {
     text-align: left;
     position: relative;
     width: 100%;
     border-collapse: collapse;
     border-spacing: 0;
  }
  
  th {
     font-family: $font2;
     font-size: 13px;
     font-weight: 700;
     padding: 12px 16px;
     padding-right: 32px;
     color: #555;
     background: white;
     position: -webkit-sticky;
     position: sticky;
     border-bottom: 5px solid #eee;
     top: 0; /* Don't forget this, required for the stickiness */
     box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4);
  }
  </code></pre>