jquery - Bootstrap 3表格可滚动

Question

我试图限制显示的行，因此我需要向表格添加滚动。 我尝试过使用一些代码，但在大多数情况下，滚动条位于表格之外，或者与 <thead> 不对齐。 。 这是代码:

    <div class="col-md-6">              
<div id="dsTable class="container">           
  <table class="table table-hover table-bordered" style="height: 300px;">
    <thead>
      <tr style="width: 100%; display: inline-table;">
        <th class="info">Players</th>
        <th class="info">Position</th>
        <th class="info">Rating</th>
        <th class="info">Salary</th>
        <th class="info">Remove</th>
      </tr>
    </thead>
    <tbody style="overflow-y: scroll; height: 200px; width: 100%; position: absolute;">
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
        <td>23112$</td>
      <td><input type="button" class="btn btn-danger" value="Remove" onclick="deleteRow(this)"/></td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
        <td>356324$</td>
      <td><input type="button" class="btn btn-danger" value="Remove" onclick="deleteRow(this)"/></td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
        <td>356324$</td>
      <td><input type="button" class="btn btn-danger" value="Remove" onclick="deleteRow(this)"/></td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
        <td>356324$</td>
      <td><input type="button" class="btn btn-danger" value="Remove" onclick="deleteRow(this)"/></td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
        <td>356324$</td>
      <td><input type="button" class="btn btn-danger" value="Remove" onclick="deleteRow(this)"/></td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
        <td>356324$</td>
      <td><input type="button" class="btn btn-danger" value="Remove" onclick="deleteRow(this)"/></td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
        <td>356324$</td>
      <td><input type="button" class="btn btn-danger" value="Remove" onclick="deleteRow(this)"/></td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
        <td>356324$</td>
      <td><input type="button" class="btn btn-danger" value="Remove" onclick="deleteRow(this)"/></td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
        <td>213123$</td>
      <td><input type="button" class="btn btn-danger" value="Remove" onclick="deleteRow(this)"/></td>
      </tr>
    </tbody>
  </table>
</div>
</div>

Answer 1

我认为表格本身实际上不能有滚动条。但是如果你将div设置为固定高度并向其添加overflow-y:scroll。然后让table占据div的100%宽度和高度。任何重叠的内容都会被隐藏，直到向下滚动？

示例如下:

http://jsfiddle.net/hywz1f4w/3/