Collapsing margins in html divs and tables

I have a html page stucture like so.

<div>
    <p>Header</p>
    <table>
       <!-- Lots of TR and TD elements in here -->
    </table>
    <p>Footer</p>
</div>

The <div> has a width of 500px and a margin of 25px. Most of the times, my <table> has a width of less than 500px but sometimes it is 800px. I have the <div> with style="overflow-x: scroll; overflow-y: scroll;, but when the <table> is big, I scroll to the right and my margin is gone. I tried adding the margin-right: 25px to the <table> but the table's right border has no margin.

How do I fix this?