Bootstrap Table Fixed Header using CSS

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 Table Fixed 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. I will write another post on how to keep table header fixed in bootstrap 4.

Earlier I had published FREE bootstrap modal popup forms with demo and download examples – Free Bootstrap Modal Forms

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 Bootstrap Table Fixed Header

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 Sticky Table Header.

Bootstrap Sticky Table Header Demo