Bootstrap表滾動條

Question

我使用引導程序，並有一個表內的列的列表。表列很長，我想讓它有一個表格的滾動條，顯示元素不得不滾動的一面。

這裏是我下面的代碼：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<table class="table table-bordered table-condensed table-hover table-striped"> 
 
    <tr> 
 
    <th>PIN Number</th> 
 
    <th>Full Name</th> 
 
    <th>Department</th> 
 
    <th>Organization</th> 
 
    <th>Branch Code</th> 
 
    <th>Campus</th> 
 
    <th>Leave Type</th> 
 
    <th>Date From</th> 
 
    <th>Date To</th> 
 
    <th>Days</th> 
 
    <th>Reason</th> 
 
    <th>Responsible PIN</th> 
 
    <th>Name</th> 
 
    <th>Status</th> 
 
    <th>Edit</th> 
 
    </tr> 
 
    <tr> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    </tr> 
 
</table>

Answer 1

只是溢出自動CSS添加div標籤，像下面的代碼： -

<div style="overflow: auto;"> 
    <table class="table">....</table> 
</div> 

，或者你可以添加表響應類如下所示： -

<div class="table-responsive"> 
    <table class="table">....</table> 
</div> 

它可以幫助你。

Answer 2

這就是我如何去做，希望它有幫助。

.table-wrapper { 
 
    max-width: 600px; 
 
    overflow: scroll; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="table-wrapper"> 
 

 
    <table class="table table-bordered table-condensed table-hover table-striped"> 
 
    <tr> 
 
     <th>PIN Number</th> 
 
     <th>Full Name</th> 
 
     <th>Department</th> 
 
     <th>Organization</th> 
 
     <th>Branch Code</th> 
 
     <th>Campus</th> 
 
     <th>Leave Type</th> 
 
     <th>Date From</th> 
 
     <th>Date To</th> 
 
     <th>Days</th> 
 
     <th>Reason</th> 
 
     <th>Responsible PIN</th> 
 
     <th>Name</th> 
 
     <th>Status</th> 
 
     <th>Edit</th> 
 
    </tr> 
 
    <tr> 
 
     <td>Data</td> 
 
     <td>Data</td> 
 
     <td>Data</td> 
 
     <td>Data</td> 
 
     <td>Data</td> 
 
     <td>Data</td> 
 
     <td>Data</td> 
 
     <td>Data</td> 
 
     <td>Data</td> 
 
     <td>Data</td> 
 
     <td>Data</td> 
 
     <td>Data</td> 
 
     <td>Data</td> 
 
     <td>Data</td> 
 
     <td>Data</td> 
 
    </tr> 
 
    </table> 
 

 
</div>