Bootstrap3テーブル応答は、コンテナ

Question

内にある場合、私はbootstrap3を使用していますし、使用のテーブルクラス応答応答私のテーブルを作るために働いていません。テーブルがコンテナ内にある場合、モバイルビューでは水平スクロールバーが正しく表示されません。

これは私のコードこの問題を解決するにはどうすればよい

<div class="table-responsive"> 
    <table class="table table-hover"> 
    <thead> 
     <tr> 
     <th>#</th> 
     <th>Table heading</th> 
     <th>Table heading</th> 
     <th>Table heading</th> 
     <th>Table heading</th> 
     <th>Table heading</th> 
     <th>Table heading</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
     <td>1</td> 
     <td>Table cell</td> 
     <td>Table cell</td> 
     <td>Table cell</td> 
     <td>Table cell</td> 
     <td>Table cell</td> 
     <td>Table cell</td> 
     </tr> 
     <tr> 
     <td>2</td> 
     <td>Table cell</td> 
     <td>Table cell</td> 
     <td>Table cell</td> 
     <td>Table cell</td> 
     <td>Table cell</td> 
     <td>Table cell</td> 
     </tr> 
     <tr> 
     <td>3</td> 
     <td>Table cell</td> 
     <td>Table cell</td> 
     <td>Table cell</td> 
     <td>Table cell</td> 
     <td>Table cell</td> 
     <td>Table cell</td> 
     </tr> 
    </tbody> 
    </table> 
</div> 


<div class="container"> 

    <p>INSIDE CONTAINER</p> 

    <div class="table-responsive"> 
    <table class="table table-hover"> 
     <thead> 
     <tr> 
      <th>#</th> 
      <th>Table heading</th> 
      <th>Table heading</th> 
      <th>Table heading</th> 
      <th>Table heading</th> 
      <th>Table heading</th> 
      <th>Table heading</th> 
     </tr> 
     </thead> 
     <tbody> 
     <tr> 
      <td>1</td> 
      <td>Table cell</td> 
      <td>Table cell</td> 
      <td>Table cell</td> 
      <td>Table cell</td> 
      <td>Table cell</td> 
      <td>Table cell</td> 
     </tr> 
     <tr> 
      <td>2</td> 
      <td>Table cell</td> 
      <td>Table cell</td> 
      <td>Table cell</td> 
      <td>Table cell</td> 
      <td>Table cell</td> 
      <td>Table cell</td> 
     </tr> 
     <tr> 
      <td>3</td> 
      <td>Table cell</td> 
      <td>Table cell</td> 
      <td>Table cell</td> 
      <td>Table cell</td> 
      <td>Table cell</td> 
      <td>Table cell</td> 
     </tr> 
     </tbody> 
    </table> 
    </div> 

</div> 

CSS

.container { width: 1000px; } 

bootply

のですか？おかげ

Answer 1

問題は .container {幅である：1000px。 }

親の幅が固定されたら、それは常に親の幅に依存するよう、テーブル応答性は、幅の変化に応答しません。

テーブルが応答しなくなるだろうように、あなたは％にコンテナの幅を変更することができます。

Answer 2

ブートストラップ設定でクラス.containerため：

`@media (min-width: 1200px){ 
    .container { 
    width: 1170px; 
    } 
} 

@media (min-width: 992px){ 
    .container { 
    width: 970px; 
    } 
} 

@media (min-width: 768px){ 
.container { 
    width: 750px; 
    } 
}` 

あなたが.container { width: 1000px; }を設定した場合、それは固定されており、応答しないでしょう。あなたが編集することができ
=>：
+クラス.containerを設定しないと、あなたは、あなたの新しいクラス.box{width:1000px}
+コード<div class="box"></div>ラップコードを設定します。
=>あなたのテーブルはボックスの幅1000pxと反応します