Getting a right margin on a very wide HTML table?

Question

I have a wide table - so wide, it cannot fit in screen width; so browser is obliged to display scrollbars. I'd like some 20px space from left and right of this table; so I tried to style it (full code below) with:

  table {
    margin-left: 20px;
    margin-right: 20px;
    text-align: left;
    border-collapse: collapse;
    background-color: #e0e4f5;
  }

Left margin shows as expected:

but right margin doesn't (bit difficult to see - but note alignment of right edge of horizontal scrollbar with right edge of table):

Is it possible to get some sort of right margin to show?

Here is my full test code:

table { margin-left: 20px; margin-right: 20px; text-align: left; border-collapse: collapse; background-color: #e0e4f5; }

<table id="mytable">
  <caption>Table caption</caption>
  <thead>
    <tr>
    <th scope='col'>head 1</th>
    <th scope='col'>head 2</th>
    <th scope='col'>head 3</th>
    <th scope='col'>head 4</th>
    <th scope='col'>head 5</th>
    <th scope='col'>head 6</th>
    <th scope='col'>head 7</th>
    <th scope='col'>head 8</th>
    <th scope='col'>head 9</th>
    <th scope='col'>head 10</th>
    <th scope='col'>head 11</th>
    <th scope='col'>head 12</th>
    <th scope='col'>head 13</th>
    <th scope='col'>head 14</th>
    <th scope='col'>head 15</th>
    <th scope='col'>head 16</th>
    <th scope='col'>head 17</th>
    <th scope='col'>head 18</th>
    <th scope='col'>head 19</th>
    <th scope='col'>head 20</th>
    <th scope='col'>head 21</th>
    <th scope='col'>head 22</th>
    <th scope='col'>head 23</th>
    <th scope='col'>head 24</th>
    <th scope='col'>head 25</th>
    <th scope='col'>head 26</th>
    <th scope='col'>head 27</th>
    <th scope='col'>head 28</th>
    <th scope='col'>head 29</th>
    <th scope='col'>head 30</th>
    <th scope='col'>head 31</th>
    <th scope='col'>head 32</th>
    <th scope='col'>head 33</th>
    <th scope='col'>head 34</th>
    <th scope='col'>head 35</th>
    <th scope='col'>head 36</th>
    <th scope='col'>head 37</th>
    <th scope='col'>head 38</th>
    <th scope='col'>head 39</th>
    <th scope='col'>head 40</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
    <td colspan="100">Table footer</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
    <td>test 1</td>
    <td>test 2</td>
    <td>test 3</td>
    <td>test 4</td>
    <td>test 5</td>
    <td>test 6</td>
    <td>test 7</td>
    <td>test 8</td>
    <td>test 9</td>
    <td>test 10</td>
    <td>test 11</td>
    <td>test 12</td>
    <td>test 13</td>
    <td>test 14</td>
    <td>test 15</td>
    <td>test 16</td>
    <td>test 17</td>
    <td>test 18</td>
    <td>test 19</td>
    <td>test 20</td>
    <td>test 21</td>
    <td>test 22</td>
    <td>test 23</td>
    <td>test 24</td>
    <td>test 25</td>
    <td>test 26</td>
    <td>test 27</td>
    <td>test 28</td>
    <td>test 29</td>
    <td>test 30</td>
    <td>test 31</td>
    <td>test 32</td>
    <td>test 33</td>
    <td>test 34</td>
    <td>test 35</td>
    <td>test 36</td>
    <td>test 37</td>
    <td>test 38</td>
    <td>test 39</td>
    <td>test 40</td>
    </tr>
    <tr>
    <td>test 1</td>
    <td>test 2</td>
    <td>test 3</td>
    <td>test 4</td>
    <td>test 5</td>
    <td>test 6</td>
    <td>test 7</td>
    <td>test 8</td>
    <td>test 9</td>
    <td>test 10</td>
    <td>test 11</td>
    <td>test 12</td>
    <td>test 13</td>
    <td>test 14</td>
    <td>test 15</td>
    <td>test 16</td>
    <td>test 17</td>
    <td>test 18</td>
    <td>test 19</td>
    <td>test 20</td>
    <td>test 21</td>
    <td>test 22</td>
    <td>test 23</td>
    <td>test 24</td>
    <td>test 25</td>
    <td>test 26</td>
    <td>test 27</td>
    <td>test 28</td>
    <td>test 29</td>
    <td>test 30</td>
    <td>test 31</td>
    <td>test 32</td>
    <td>test 33</td>
    <td>test 34</td>
    <td>test 35</td>
    <td>test 36</td>
    <td>test 37</td>
    <td>test 38</td>
    <td>test 39</td>
    <td>test 40</td>
    </tr>
    <tr>
    <td>test 1</td>
    <td>test 2</td>
    <td>test 3</td>
    <td>test 4</td>
    <td>test 5</td>
    <td>test 6</td>
    <td>test 7</td>
    <td>test 8</td>
    <td>test 9</td>
    <td>test 10</td>
    <td>test 11</td>
    <td>test 12</td>
    <td>test 13</td>
    <td>test 14</td>
    <td>test 15</td>
    <td>test 16</td>
    <td>test 17</td>
    <td>test 18</td>
    <td>test 19</td>
    <td>test 20</td>
    <td>test 21</td>
    <td>test 22</td>
    <td>test 23</td>
    <td>test 24</td>
    <td>test 25</td>
    <td>test 26</td>
    <td>test 27</td>
    <td>test 28</td>
    <td>test 29</td>
    <td>test 30</td>
    <td>test 31</td>
    <td>test 32</td>
    <td>test 33</td>
    <td>test 34</td>
    <td>test 35</td>
    <td>test 36</td>
    <td>test 37</td>
    <td>test 38</td>
    <td>test 39</td>
    <td>test 40</td>
    </tr>
    <tr>
    <td>test 1</td>
    <td>test 2</td>
    <td>test 3</td>
    <td>test 4</td>
    <td>test 5</td>
    <td>test 6</td>
    <td>test 7</td>
    <td>test 8</td>
    <td>test 9</td>
    <td>test 10</td>
    <td>test 11</td>
    <td>test 12</td>
    <td>test 13</td>
    <td>test 14</td>
    <td>test 15</td>
    <td>test 16</td>
    <td>test 17</td>
    <td>test 18</td>
    <td>test 19</td>
    <td>test 20</td>
    <td>test 21</td>
    <td>test 22</td>
    <td>test 23</td>
    <td>test 24</td>
    <td>test 25</td>
    <td>test 26</td>
    <td>test 27</td>
    <td>test 28</td>
    <td>test 29</td>
    <td>test 30</td>
    <td>test 31</td>
    <td>test 32</td>
    <td>test 33</td>
    <td>test 34</td>
    <td>test 35</td>
    <td>test 36</td>
    <td>test 37</td>
    <td>test 38</td>
    <td>test 39</td>
    <td>test 40</td>
    </tr>
  </tbody>
</table>
</div>

</body>

</html>

Answer 1

If you can add a table-wrapper div like in this jsFiddle (http://jsfiddle.net/nnJ6F/1/), you can set that to display inline-block:

.table-wrapper {
    display:inline-block;
}

Here's a working jsFiddle: http://jsfiddle.net/nnJ6F/5/