Horizontal scrolling shadows on top of colored elements

Question

I've been wanting to add an horizontal shadow on a table but the current solutions (Lea Verou) use background gradients on the wrapper and the rows on the table have a background color so the effect goes away.

I was thinking in adding a pseudo element to be on top but I'm having a hard time to make it as wide as the table and have another wrapper to set the background gradients for the shadows.

Here's the current solutions and how it does not work well with elements with a background.

<div class="scrollbox">
    <ul>
        <li>Scroll right</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
        <li>The end!</li>
        <li>No shadow there.</li>
    </ul>
</div>

.scrollbox {
    overflow: auto;
    max-width: 400px;
    max-height: 200px;
    margin: 50px auto;
    ul {
      max-width: 200%;
    }
    li {
      display: table-cell;
      padding: 1em;
      border: 1px solid #bebebe
    }
    li:nth-child(odd) {
    color: #fff;
    background-color: rebeccapurple;
  }

  background-image: 
    linear-gradient(to right, white, white),
    linear-gradient(to right, white, white),

    linear-gradient(to right, rgba(0,0,0,.25), rgba(255,255,255,0)),
    linear-gradient(to left, rgba(0,0,0,.25), rgba(255,255,255,0));   
    background-position: left center, right center, left center, right center;
    background-repeat: no-repeat;
    background-color: white;
    background-size: 20px 100%, 20px 100%, 10px 100%, 10px 100%;
    background-attachment: local, local, scroll, scroll;
}

https://codepen.io/ramiro-ruiz/pen/KKPmoaV

Answer 1

I found a simple solution by just using colors with opacity rgba(0,0,0,.1) I let the wrapper background gradient to pass and keeps the illusion of shadows being on top.

Working example: https://codepen.io/ramiro-ruiz/pen/YzKVOGK