title: A fading effect on a horizontal scrolling table
body: <p>Right, so I'm trying to create a fade-effect on just one side of a table that doesn't fit in my resonsive layout, so that the user can recognise that he is able to scroll the table (due to scrollbars being invisible on mobile). </p>
  
  <p>I've used the <code>box-shadow</code> on inset with some positioning to create a fancy shadow that falls over the table, but when I scroll it, it's positioned absolutely (obviously, since I specify that) and scrolls along. Instead of staying put. </p>
  
  <p>When I specify the position as <code>fixed</code>, the <code>:after</code> uses the entire body as its parent, not just its relative parent.</p>
  
  <pre><code>.table-holder {
      width: 400px;
      overflow-x: auto;
      overflow-y: hidden;
      margin-bottom: 20px;
      position: relative;
      height: auto;
  }
  
  .everything .table-holder:after {
      box-shadow: -20px 1px 20px 0 #f00 inset;
      content: "";
      display: block;
      height: 200%;
      left: -0;
      position: absolute; /* : fixed takes the whole page */
      top: -20px;
      width: 100%;
  }
  </code></pre>
  
  <p>This is fiddlable here: <a href="http://jsfiddle.net/8enne5qf/1/" rel="nofollow">http://jsfiddle.net/8enne5qf/1/</a></p>
  
  <p>Is it at all possible to get this shadow to be fixed on the parent div? </p>