5

幅の広いテーブルがあります。幅が広すぎて、画面の幅に収まりません。そのため、ブラウザはスクロールバーを表示する義務があります。このテーブルの左右に 20 ピクセルのスペースが必要です。だから私はそれをスタイルしようとしました（以下の完全なコード）：

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

左マージンは期待どおりに表示されます。

左マージン

しかし、右マージンはそうではありません（少し見にくいですが、水平スクロールバーの右端とテーブルの右端の位置合わせに注意してください）：

右マージン

ある種の右マージンを表示することは可能ですか?

ここに私の完全なテストコードがあります:

テーブル { 左マージン: 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>
4

3 に答える 3

2

この jsFiddle ( http://jsfiddle.net/nnJ6F/1/ ) のようにテーブル ラッパー div を追加できる場合は、インライン ブロックを表示するように設定できます。

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

動作中の jsFiddle は次のとおりです: http://jsfiddle.net/nnJ6F/5/

于 2013-02-06T02:02:17.560 に答える
0

テーブル要素をに設定するdisplay:inline-block;と、適切なマージンが得られます。インライン ブロックがブラウザの互換性要件を満たしていることを確認してください。

デモ。

于 2013-02-06T02:14:10.577 に答える
-1

ここでの私のコメントについて あなたはそれがどのように機能するかを見ることができます：

例

vertical panel結果と Javascript の間の境界線を移動するだけです。

于 2013-02-06T01:29:29.660 に答える