divに応答する水平スクロールバーを追加するにはどうすればよいですか？

Question

私は、ウィンドウをサイズし直すとき、私は

<div class="container"> 

     <table class="table table-striped table-bordered" style="width: 800px;"> 
     <tr><th>First Name</th><th>Last Name</th><th>Age</th></tr> 
     <tr><td><a class="cl" href="">Mickey</a></td><td>Mouse</td><td>5</td> 
     <tr><td><a class="cl" href="">Tom</a></td><td>Cat</td><td>6</td> 
     <tr><td><a class="cl" href="">Pooh</a></td><td>Bear</td><td>4</td> 
     <tr><td><a class="cl" href="">Donald</a></td><td>Duck</td><td>7</td> 
     <tr><td><a class="cl" href="">Jerry</a></td><td>Mouse</td><td>8</td> 
     </table 

</div> 

、このような固定幅のブートストラップのテーブルを持って、私は、水平スクロールバーが私のコードに下<div>

Linkで表示します。

Answer 1

table-responsiveに貼り付けてください。ブートストラップではテーブルレスポンスに関するdetailsがあります。

<div class="container"> 
    <div class="table-responsive"> 
     <table class="table table-striped table-bordered" style="width: 800px;"> 
     <tr><th>First Name</th><th>Last Name</th><th>Age</th></tr> 
     <tr><td><a class="cl" href="">Mickey</a></td><td>Mouse</td><td>5</td> 
     <tr><td><a class="cl" href="">Tom</a></td><td>Cat</td><td>6</td> 
     <tr><td><a class="cl" href="">Pooh</a></td><td>Bear</td><td>4</td> 
     <tr><td><a class="cl" href="">Donald</a></td><td>Duck</td><td>7</td> 
     <tr><td><a class="cl" href="">Jerry</a></td><td>Mouse</td><td>8</td> 
     </table> 
    </div> 
</div> 

デモ：http://codeply.com/go/XGV8aYFiZW

Answer 2

あなたはいくつかの選択肢があります。

white-space:nowrap;といくつかのパディングを使用してください。

overflow: scroll;を使用します。これにより、下部に追加のスクロールバーが追加されますが、Firefoxではラッピングの問題が修正されます。

overflow-y:scrollは、CSS3であり、現代のブラウザのみでサポートされています。