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>

它可能对你有帮助。

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>