<div class="container">
  <div class="row">
    <table class="table table-fixed">
      <thead>
        <tr>
          <th class="col-xs-2">Id</th>
          <th class="col-xs-5">Name</th>
          <th class="col-xs-5">Username</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="col-xs-2">1</td>
          <td class="col-xs-5">Mark</td>
          <td class="col-xs-5">@mdo</td>
        </tr>
        <tr>
          <td class="col-xs-2">2</td>
          <td class="col-xs-5">Jacob</td>
          <td class="col-xs-5">@fat</td>
        </tr>
        <tr>
          <td class="col-xs-2">3</td>
          <td class="col-xs-5">Larry</td>
          <td class="col-xs-5">@twitter</td>
        </tr>
        <tr>
          <td class="col-xs-2">4</td>
          <td class="col-xs-5">Larry</td>
          <td class="col-xs-5">@twitter</td>
        </tr>
        <tr>
          <td class="col-xs-2">5</td>
          <td class="col-xs-5">Larry</td>
          <td class="col-xs-5">@twitter</td>
        </tr>
        <tr>
          <td class="col-xs-2">6</td>
          <td class="col-xs-5">Larry</td>
          <td class="col-xs-5">@twitter</td>
        </tr>
        <tr>
          <td class="col-xs-2">7</td>
          <td class="col-xs-5">Larry</td>
          <td class="col-xs-5">@twitter</td>
        </tr>
        <tr>
          <td class="col-xs-2">8</td>
          <td class="col-xs-5">Larry</td>
          <td class="col-xs-5">@twitter</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>
<div class="read_article"><a href="http://www.designtheway.com/fixed-header-on-scroll/" target="_blank">Read full article</a></div>
.table-fixed {
    background-color: #fbfbfb;
    width: 100%;
}
.table-fixed tbody {
    height: 200px;
    overflow-y: auto;
    width: 100%;
}
.table-fixed thead, .table-fixed tbody, .table-fixed tr, .table-fixed td, .table-fixed th {
    display: block;
}
.table-fixed tbody td {
    float: left;
}
.table-fixed thead tr th {
    background-color:#159bd0;
    border-color:#0881b1;
    float: left;
	  color:#fff;
}
.read_article{
	text-align:center;
}

External CSS

  1. https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.