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.

Demo here

View More:

Conclusion:

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

Thank You.

51 Comments

Cancel reply

Richelle Dembek says: January 25, 2020
I precisely wished to say thanks again. I do not know the things that I would’ve undertaken without those methods provided by you over my problem. It actually was the frightening condition in my circumstances, but being able to see the very well-written way you handled that took me to weep for happiness. I am grateful for your help and then expect you are aware of a great job your are providing teaching people today all through your web page. I know that you have never come across all of us.
Moshe Fillers says: January 26, 2020
Love your blog, do you have a YouTube Channel as well?
Hairstyles says: February 1, 2020
I am really impressed along with your writing skills and also with the layout in your blog. Is that this a paid theme or did you customize it yourself? Either way stay up the excellent high quality writing, it is rare to see a great weblog like this one these days..
Freebies says: February 3, 2020
It’s a shame you don’t have a donate button! I’d most certainly donate to this outstanding blog! I suppose for now i’ll settle for bookmarking and adding your RSS feed to my Google account. I look forward to fresh updates and will talk about this site with my Facebook group. Chat soon!
Harriet Cunningham says: March 5, 2020
You article definitely has all the information and facts I needed about this subject. I didn’t know who to ask, so thank you kindly…
YesBet88 says: March 18, 2020
Brand new boots , every day !
Vampatcleameper says: April 24, 2020
vegas slots online online casino slots world class casino slots
Vampatcleameper says: April 24, 2020
vegas casino slots best online casino play online casino
black girl suck dick says: April 26, 2020
Greetings! Very helpful advice in this particular article! It is the little changes that will make the most important changes. Thanks a lot for sharing!
Vampatcleameper says: April 26, 2020
casino online casino play best online casinos
Pratquercurse says: April 26, 2020
casino bonus codes http://onlinecasinosw.com/ – best online casinos casino games slots games free
Vampatcleameper says: April 26, 2020
casino real money free online slots real money casino
Pratquercurse says: April 27, 2020
online casino slots best online casino slot games
Pratquercurse says: April 27, 2020
play online casino casino games vegas slots online vegas slots online
Riva Fenchel says: April 28, 2020
At this time it appears like Drupal is the top blogging platform available right now. (from what I’ve read) Is that what you’re using on your blog?
Vampatcleameper says: April 28, 2020
no deposit casino casino bonus codes best online casinos
Pratquercurse says: April 28, 2020
free slots games online casino bonus casino online slots casino slots
Vampatcleameper says: April 29, 2020
online casino slots online casino gambling online casinos big fish casino
Vampatcleameper says: April 30, 2020
free casino games online online slots online slots
Vampatcleameper says: April 30, 2020
slots for real money slots games casino bonus codes
Pratquercurse says: April 30, 2020
slots for real money no deposit casino play casino play slots online
Claude Hennagir says: May 1, 2020
First time visiting your website, I like your website!
Vampatcleameper says: May 2, 2020
free casino slot games play online casino online casino gambling best online casinos
childporn says: May 3, 2020
cialis ilaclarinda coronovirus var
Vampatcleameper says: May 5, 2020
casino games http://casinogamespqr.com/ – casino online slots online slots world class casino slots
Pratquercurse says: May 6, 2020
casino games free online slots world class casino slots free casino
Pratquercurse says: May 7, 2020
online casinos http://casinorealmoneyfdr.com/ – play slots best online casino online casinos
Vampatcleameper says: May 8, 2020
online gambling online casino games online casino games best online casinos
Pratquercurse says: May 8, 2020
free slots games online casino real money casino game
Pratquercurse says: May 9, 2020
play slots casino real money casino blackjack
google porn google fuck says: May 9, 2020
google porn google fuck
Vampatcleameper says: May 9, 2020
online casino gambling real money casino free casino games
Vampatcleameper says: May 10, 2020
free casino games online http://casinoslotsfest.com/ – free casino games free slots games slots games free
Pratquercurse says: May 10, 2020
casino play play slots online slots casino slots
Vampatcleameper says: May 10, 2020
vegas casino slots real casino slots online casino
Pratquercurse says: May 11, 2020
slots for real money play online casino online casino gambling
Pratquercurse says: May 11, 2020
casino blackjack online casino real money online gambling casino game
Pratquercurse says: May 12, 2020
casino games real money casino cashman casino slots casino bonus codes
Pratquercurse says: May 12, 2020
real casino slots casino game casino slots slots for real money
Pratquercurse says: May 12, 2020
free casino games online real money casino online casino bonus
Pratquercurse says: May 12, 2020
cashman casino slots http://onlinecasinofbk.com/ – slot games play slots free online slots
Pratquercurse says: May 15, 2020
cbd oil benefits http://cbdoilusd.com/ – cbd near me cbd for sale cbd oil for dogs
Pratquercurse says: May 17, 2020
cbd oil store cbd buy cbd oil online cbd pure
Pratquercurse says: May 20, 2020
cbd medic http://buycbdoilwalm.com/ – cbd cbd capsules cbd vape
Vampatcleameper says: May 22, 2020
cbd vape best cbd oil cbd near me best cbd oil buy cbd oil
Pratquercurse says: May 23, 2020
pure cbd oil http://buycbdoilonline.us.com/ – cbd products cbd store cbd oil store
카지노 사이트 says: June 2, 2020
Love to spend time near Sea !
Adan Urion says: June 18, 2020
Se asignará el salón lo más cercano directo al domicilio del postulante dado que nuestro cliente cuenta con una amplia red sucursales en Capital Federal y Gran Buenos Aires: Zona Norte, Oeste y Sur. Solicitamos una secretaria bilingüe Ingles – Castellano para importante entre 20 y 45 años.Horario de trabajo de 9 a 18 personas interesadas deberán colocar en asunto de email REF: Secretaria Bilingüe. Seleccionamos persona sexo femenino con experiencia en venta de Servicios productos intangibles Preferentemente Servicios de Personal Tercerizado, Eventual Maestranza. Buscamos personas proactivas, orientadas al trabajo en equipo y al logro de resultados.
Brendon Troutt says: June 24, 2020
En Mecanizados Iterga estamos especializados en el Mecanizado de Precisión de piezas, fabricando piezas dentro de las tolerancias dimensionales y geométricas más exigentes. Una vez más, al igual que con la fabricación relacionada con la medicina, los seres humanos pueden depender de la precisión y fiabilidad de los componentes que entras en los productos y equipos. Esto dio lugar a una nueva clase de máquinas herramienta, máquinas multitarea (MTM), que están especialmente diseñadas para facilitar el fresado y el volteo dentro de la misma envolvente de trabajo.

Pingback: Google
Pingback: Google

Debug On Web