Now a days web developers are making responsive html tables. Responsive table alone won’t be nice when you have large number of rows and columns in the table. If any table that has thousands of rows and more than 10 columns then height of the table is always larger than the webpage document. All you need to do is scroll the webpage to see the table rows without knowing the corresponding table headers. To avoid this poor user interface, I’m going to share Bootstrap Fixed Table Header using simple CSS that will make the  table header sticky 
You no need to scroll up and see the table headers. This small hack will help the users to see the table headers while scrolling inside the table.
Lets see how to make Bootstrap Fixed Table Header with CSS

Step 1 : Download Bootstrap

Download the bootstrap files from here or include directly from CDN

Step 2 : CSS code for Fixed Header Table

Below code is used to make the table header sticky and scrollable. You have to add class  .table-fixed  in your existing table.

.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 tr:after {
 content: "";
 display: block;
 visibility: hidden;
 clear: both;
}
.table-fixed tbody td,
.table-fixed thead > tr > th {
 float: left;
}

Now I’m going to add some background color to table header to differentiate it from table rows using the below css

.table > thead > tr > th,
.table > thead > tr > td {
 font-size: .9em;
 font-weight: 400;
 border-bottom: 0;
 letter-spacing: 1px;
 vertical-align: top;
 padding: 8px;
 background: #51596a;
 text-transform: uppercase;
 color: #ffffff;
}

Step 3 : HTML Code for Scrolling Table with Fixed Header

By adding the class table-fixed into any table, you will get the fixed header

<table class="table table-fixed">
 <thead>
 <tr>
 <th class="col-xs-1">#</th>
 <th class="col-xs-5">President</th>
 <th class="col-xs-3">Terms</th>
 <th class="col-xs-3">Tenure</th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <td class="col-xs-1">1</td>
 <td class="col-xs-5">George Washington</td>
 <td class="col-xs-3">two</td>
 <td class="col-xs-3">1789-1797</td>
 </tr>
 <tr>
 <td class="col-xs-1">2</td>
 <td class="col-xs-5">John Adams</td>
 <td class="col-xs-3">one</td>
 <td class="col-xs-3">1797-1801</td>
 </tr>
 </tbody>
</table>

Thats it man, You are done.

Just copy & paste the above css code into your webpage and finally add the class  .table-fixed  into any table to make Fixed Table Header.