<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;
}
This Pen doesn't use any external JavaScript resources.