在非常寬的HTML表格上獲取正確的邊距？

Question

我有一個寬桌 - 如此寬，它不適合在屏幕寬度;所以瀏覽器必須顯示滾動條。我希望這張表的左右兩邊有20px的空間;所以我試圖用樣式它（以下全碼）：

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

左緣顯示預期：

但右邊距不（位很難看 - 但注意

：與表的右邊緣）水平滾動條的右邊緣的對準

是否有可能獲得某種右邊界顯示？

這裏是我完整的測試代碼：

表{ 保證金左：20像素; 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

關於我的評論在這裏你可以看到它是如何工作的：

example

只需推動的結果和Javascript地方之間vertical panel邊界。

Answer 2

如果你能在這的jsfiddle（http://jsfiddle.net/nnJ6F/1/）添加表，包裝DIV一樣，你可以設置顯示inline-block的：

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

這裏有一個工作的jsfiddle：http://jsfiddle.net/nnJ6F/5/

Answer 3

你可以將表格元素設置爲display:inline-block;，這將爲您帶來正確的利潤率。只要確保內聯塊滿足您的要求即可。

Demo。