overflow on parent div prevent box-shadow to display

Question

I have a <table> with a soft box-shadow and I want to wrap it inside a <div> so that I can make the content overflow on x-axis (the real table is large, I need this effect in smaller screen).

It's straightforward but when I add the CSS property overflow-x: auto; on the wrapper <div> the box-shadow is not yet displayed correctly (only the right side box-shadow is visible, and only in larger screen).
Please refer to this JSbin example where the first table is the correct visualization while the second one has the glitch.

How can I solve the problem without removing the overflow property?

Answer 1

You can add padding for parent same size as shadow.