Divine duyarlı yatay kaydırma çubuğu nasıl eklenir?

Question

Böyle sabit genişlikteki bir Bootstrap tablosunu, ben pencere boyutunu olduğun zaman

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

, ben yatay kaydırma çubuğu alt kodumu <div>

Link kadar göstermek istiyorum var.

Answer 1

Sadece bir table-responsive ürününe sarın. İşte Bootstrap'te masaya duyarlı olan 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> 

Demo: http://codeply.com/go/XGV8aYFiZW

Answer 2

Birkaç seçeneğiniz var.

white-space:nowrap; ve bazı dolguları kullanın.

Altta fazladan kaydırma çubuğu ekleyen ancak Firefox'ta kaydırma sorununu gideren overflow: scroll;'u kullanın.

CSS3 olan ve yalnızca modern tarayıcılar tarafından desteklenen overflow-y:scroll kullanın.