我有一张很宽的 table - 太宽了,无法适应屏幕宽度;所以浏览器有义务显示滚动条。我想要这张 table 左右各有 20px 的空间;所以我尝试使用以下方式设置样式(下面的完整代码):
table {
margin-left: 20px;
margin-right: 20px;
text-align: left;
border-collapse: collapse;
background-color: #e0e4f5;
}
左边距按预期显示:
但右边距没有(有点难看 - 但请注意水平滚动条的右边缘与表格的右边缘对齐):
是否可以显示某种右边距?
这是我的完整测试代码:
table { 左边距:20px; 右边距:20px; 文本对齐:左; 边界崩溃:崩溃; 背景色:#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/ ) 中添加一个表格包装 div,您可以将其设置为显示内联 block :
.table-wrapper {
display:inline-block;
}
这是一个有效的 jsFiddle:http://jsfiddle.net/nnJ6F/5/
关于html - 在非常宽的 HTML 表格上获得正确的边距?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14720021/