Fixed Header Scrolling Table With Bootstrap

In this tutorial, I am going to create a Fixed Header Scrolling Table with Bootstrap.

Fixed Header Scrolling Table with Bootstrap:

Here is the complete example.

<html>
<head>
<title>
Bootstrap Table Example
</title>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<style type="text/css">
.table-fixed thead {
width: 97%;
}
.table-fixed tbody {
height: 230px;
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, .table-fixed thead > tr> th {
float: left;
border-bottom-width: 0;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="panel panel-default">
<div class="panel-heading">
<h4>
Fixed Header Scrolling Table
</h4>
</div>
<table class="table table-fixed">
<thead>
<tr>
<th class="col-xs-2">#</th><th class="col-xs-8">Student Name</th><th class="col-xs-2">Marks</th>
</tr>
</thead>
<tbody>
<tr>
<td class="col-xs-2">1</td><td class="col-xs-8">Vijay Singh</td><td class="col-xs-2">98/100</td>
</tr>
<tr>
<td class="col-xs-2">2</td><td class="col-xs-8">Ritwik Sinha</td><td class="col-xs-2">88/100</td>
</tr>
<tr>
<td class="col-xs-2">3</td><td class="col-xs-8">Arvind Patel</td><td class="col-xs-2">86/100</td>
</tr>
<tr>
<td class="col-xs-2">4</td><td class="col-xs-8">Kiran Kumar </td><td>73/100</td>
</tr>
<tr>
<td class="col-xs-2">5</td><td class="col-xs-8">Amir Sohail</td><td class="col-xs-2">89/100</td>
</tr>
<tr>
<td class="col-xs-2">6</td><td class="col-xs-8">Rishab Tiwari</td><td class="col-xs-2">99/100</td>
</tr>
<tr>
<td class="col-xs-2">7</td><td class="col-xs-8">Salman Khan</td><td class="col-xs-2">56/100</td>
</tr>
<tr>
<td class="col-xs-2">8</td><td class="col-xs-8">Shivam Chaudhary</td><td class="col-xs-2">96/100</td>
</tr>
<tr>
<td class="col-xs-2">9</td><td class="col-xs-8">Akash Singh</td><td class="col-xs-2">88/100</td>
</tr>
<tr>
<td class="col-xs-2">10</td><td class="col-xs-8">Gaurav Patel</td><td class="col-xs-2">77/100</td>
</tr>
<tr>
<td class="col-xs-2">11</td><td class="col-xs-8">Puneet Nigam</td><td class="col-xs-2">44/100</td>
</tr>

</tbody>
</table>
</div>
</div>
</div>
</body>
</html>

Save the file with .html extension and view in browser.

Fixed Header

Demo here

View More:

Conclusion:

Hope you loved this small post. I would appreciate your feedback, comments and suggestions.

Thank You.

Fixed Header Scrolling Table with Bootstrap:

Demo here

View More:

Conclusion:

Related Posts:

Leave a Comment Cancel reply

Recent Posts

Categories