Bootstrap Fixed Table Header using CSS

Bootstrap Fixed Table Header using CSS

Many web developer creating responsive HTML tables. If the table having a large number of rows and columns in a table. Meanwhile, if any table has more than thousands of row and more than 10 columns then table height is always larger than your webpage. To creating a good interface, I am going to tell you Bootstrap Fixed Table Header using simple CSS, it will make the able header sticky.

Its make you very uncomfortable to scroll the webpage to see the table rows corresponding table headers.

Here are small tricks, that’s will help you to see all table rows by the scrolling inside the table to the corresponding headers.

Let’s see the way to create Bootstrap mounted Table Header with CSS

Step 1: Download Bootstrap

Download the bootstrap files from here or embody directly from CDN

Step 2: CSS code for Fixed Header Table

Below code is employed to form the table header sticky and scrollable. you’ve got to feature category .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 am going to add the background color to table header to differentiate it from table rows victimization 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 category table-fixed into any table, you’ll get the mounted 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>

That’s it, man, you are done.

Just copy & paste the higher than CSS code into your webpage and eventually add the category .table-fixed into any table to form mounted Table Header.

Demo | Download