Q:

Bootstrap 3 table scrollable

I am trying to limit the rows displayed, so I need to add scroll to the table.
I have tryed using some codes but in most cases the scroll is outside the table or it's not alighned with the <thead>.
Here is the code:
    <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>

A:

I don't think you can actually have a scroll bar on the table itself. But if you make the div a fixed height and add overflow-y: scroll to it. Then make the table take up 100% width and height of the div. Anything overlapping will be hidden until you scroll down?
Example here:
http://jsfiddle.net/hywz1f4w/3/

