在非常宽的HTML表上获得正确的边距？

我有一张很宽的桌子——太宽了，不能适应屏幕的宽度；所以浏览器必须显示滚动条。我想要这张桌子左右各20像素的空间；因此，我尝试将其样式化（完整代码如下）：

左边距显示如预期：

但右边距并没有（有点难看-但请注意水平滚动条的右边缘和表格的右边缘对齐）：

是否有可能获得某种适当的利润率来显示

以下是我的完整测试代码：

桌子{ 左边距：20px； 右边距：20px； 文本对齐：左对齐； 边界塌陷：塌陷； 背景色：#e0e4f5； }

表格标题
总目1
总目2
总目3
总目4
总目5
总目6
总目7
总目8
总目9
总目10
总目11
总目12
总目13
总目14
总目15
总目16
总目17
总目18
总目19
总目20
总目21
总目22
总目23
总目24
总目25
总目26
总目27
总目28
总目29
总目30
总目31
总目32
总目33
总目34
总目35
总目36
总目37
总目38
总目39
总目40
表尾
测试1
测试2
测试3
测试4
测试5
测试6
测试7
测试8
测试9
测试10
测试11
测试12
测试13
测试14
测试15
测试16
测试17
测试18
测试19
测试20
测试21
测试22
测试23
测试24
测试25
测试26
测试27
测试28
测试29
测试30
测试31
测试32
测试33
测试34
测试35
测试36
测试37
测试38
测试39
测试40
测试1
测试2
测试3
测试4
测试5
测试6
测试7
测试8
测试9
测试10
测试11
测试12
测试13
测试14
测试15
测试16
测试17
测试18
测试19
测试20
测试21
测试22
测试23
测试24
测试25
测试26
测试27
测试28
测试29
测试30
测试31
测试32
测试33
测试34
测试35
测试36
测试37
测试38
测试39
测试40
测试1
测试2
测试3
测试4
测试5
测试6
测试7
测试8
测试9
测试10
测试11
测试12
测试13
测试14
测试15
测试16
测试17
测试18
测试19
测试20
测试21
测试22
测试23
测试24
测试25
测试26
测试27
测试28
测试29
测试30
测试31
测试32
测试33
测试34
测试35
测试36
测试37
测试38
测试39
测试40
测试1
测试2
测试3
测试4
测试5
测试6
测试7
测试8
测试9
测试10
测试11
测试12
测试13
测试14
测试15
测试16
测试17
测试18
测试19
测试20
测试21
测试22
测试23
测试24
测试25
测试26
测试27
测试28
测试29
测试30
测试31
测试32
测试33
测试34
测试35
测试36
测试37
测试38
测试39
测试40

关于我在这里的评论，您可以看到它是如何工作的：

---

只需在结果和Javascript位置之间移动垂直面板边框。

如果您可以像在这个jsFiddle（）中那样添加一个表包装器div，您可以将其设置为显示内联块：

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

---

这里有一个正在工作的JSFIDLE:

您可以将table元素设置为

display:inline block这将使您获得适当的边距。只需确保内联块满足您的要求

.
仅当您缩小页面时才显示右边距。在这种情况下，当表格的宽度大于页面的宽度时，它不会显示。问题是，要看到它，页面必须足够小，才能导致水平滚动。如果要在表格的右侧留出更多空间，则需要在表格的右侧留出更多空间。这不是一个解决方案，您只是在演示问题。将表的显示属性从表更改为任何其他属性都会产生副作用（请参阅）。要记住的东西。
<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>

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