Question

我有一张宽桌子 - 宽阔，不适合屏幕宽度;因此浏览器必须显示滚动条。我希望这张桌子的左右两边有20px的空间;所以我尝试用它来设计它（完整代码）：

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

左边距按预期显示：

margin-left

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

margin-right

是否有可能获得某种合适的保证金？

这是我的完整测试代码：

表{ margin-left：20px; 保证金权利：20px; text-align：left; 边界崩溃：崩溃; 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

如果你可以像在这个jsFiddle（http://jsfiddle.net/nnJ6F/1/）中那样添加一个table-wrapper div，你可以设置它来显示内联块：

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

这是一个有效的jsFiddle：http://jsfiddle.net/nnJ6F/5/

Answer 2

关于我在此处的评论您可以看到它的工作原理：

example

只需在结果和Javascript位置之间移动vertical panel边框。

Answer 3

您可以将表格元素设置为display:inline-block;，这样可以获得合适的边距。只需确保内联块满足您的browser compatibility要求。

Demo

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

3 个答案: