Quiero agregar algo de sombra a mi tabla (o al contenedor alrededor de mi mesa) para indicar que hay más columnas en ella para que el usuario sepa que debe desplazarse horizontalmente. Me pregunto cómo puedo lograr esto.

Creé este ejemplo en el que estoy logrando lo que quiero cuando eliminas el color de fondo en la línea comentada:

 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> </> ) }