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

2019年8月4日 224次阅读

我有一张宽桌子 – 宽阔,不适合屏幕宽度;因此浏览器必须显示滚动条.我希望这张桌子的左右两边有20px的空间;所以我试着用它来设计它(下面的完整代码)：

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

左边距显示为预期：

但右边距不会(有点难以看到 – 但请注意水平滚动条右边缘与桌子右边缘的对齐)：

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

这是我的完整测试代码：

  表{
    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>

最佳答案 如果你可以在这个jsFiddle(
http://jsfiddle.net/nnJ6F/1/)中添加一个table-wrapper div,你可以设置它显示inline-block：

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

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

点赞