Is there a way I can place a space between my table and scrollbars when using overflow-x: auto;"

I have a simple table like this:

<div id="table-overflow">
   <div>
      <table>
         ...
         ...
      </table>
   </div>
</div>

    #table-overflow {
        position: absolute;
        top: 10rem;
        right: 3rem;
        left: 3rem;
        bottom: 2rem;
        display: block;
        overflow-x: auto;
    }

When there are many rows and columns then scrollbars appear as expected. When the width is more than the table I see a vertical scrollbar on the right and the table data goes right up to this scrollbar. Is there some way I can have a space to the left of the vertical scroll bar and a space above the horizontal scrollbar without using a jQuery scrollbar plugin?

What I would like to see is something like this:

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx v
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx v
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx v
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx v

hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh

Where v is the vertical scrollbar, h is the horizontal scrollbar and x is the data