I want to add some shadow to my table (or the container around my table) to indicate that there is more columns in it so the user knows he should scroll horizontally. I am wondering how I can accomplish this.

I have created this example where I am accomplishing what I want when you remove the background color on the commented line:

import React from 'react'
import styled from 'styled-components'

const ScrollContainer = styled.div`
  width: 200px;
  overflow-x: scroll;
  box-shadow: 10px 0px 10px -10px black inset;
  box-shadow: -10px 0px 10px -10px black inset;
`
const Container = styled.div`
  width: 100%;
`
const Box = styled.div`
  width: 500px;
  height: 500px;
`

const BlueBox = styled(Box)`
  background: lightblue; // If you remove this, I get what I want, but this background color is overlapping the box-shadow
`

export default function App() {
  return (
    <>
      <ScrollContainer>
        <Container>
          <BlueBox />
        </Container>
      </ScrollContainer>
    </>
  )
}