jquery - Bootstrap 表格滚动条

Question

我正在使用 bootstrap 并且在表格中有一个列列表。表格列太长了，我想让表格有一个滚动条，显示必须滚动的元素。

下面是我的代码:

<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 添加表格响应类，如下所示:-

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

它可能对你有帮助。