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>