Bootstrap Fixed Table Header using CSS

Last modified on by Karthikeyan K

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.

Bootstrap Fixed Table Header using CSS

Bootstrap Scolling Table with Fixed Header using CSS

Earlier I had published FREE bootstrap modal popup forms – 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 Fixed Table 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">
<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>
<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>
<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>

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.

Bootstrap Fixed Table Header Demo

You May Also Like

5 Responses

  1. David Buell says:

    Column headers don’t line up correctly. Need to add approx 20px padding-right to thead > tr to accomodate for vertical scrollbar in tbody and set background color on tr instead of th.

  2. Keith D Kaiser says:

    All the headers come out in a vertical column with all the values below also in a vertical column. Any idea why this would be?

Leave a Reply

Your email address will not be published. Required fields are marked *