CSS: How can I keep the header of an HTML table fixed while scrolling the page?

Hi everyone,
My table has an header line and many data lines beneath it.
The content of the table is longer then the page so when I need to go down to unseen lines the header line
disappears.
Here is the code:

<!DOCTYPE html>
<html>
<head>
<style>
 th {background-color: #f1f1c1}
 th, td {border: 1px solid black}
 table.myTable {direction:rtl; width:auto; margin-left:auto; margin-right:auto; border-collapse: collapse; border: 1px solid black;}
</style>
</head>
<body>
 <table class = "myTable">
  <caption>myCaption</caption>
  <tr class = "myHeader">
   <th>#</th>
   <th>aaaaaa</th> 
   <th>bbbbb</th>
   <th>ccccc</th>
   <th>dddddd</th>
   <th>eeeeee</th>
   <th>fffff</th>
   <th>ggggggg</th>
   <th>hhhhhhh</th>
   <th>iiiiiiiii</th>
   <th>jjjjjj</th>
   <th>kkkkkk</th>
  </tr>
  <tr>
    <td>111111</td>
    <td>222222</td>
    <td>33333333</td>
    <td>444444</td>
    <td>55555</td>
    <td>666666</td>
    <td>777777</td>
    <td>888888</td>
    <td>999999</td>
    <td>1010101</td>
    <td>1111111</td>
    <td>121212</td>
   </tr>
   <tr>
    <td>111111</td>
    <td>222222</td>
    <td>33333333</td>
    <td>444444</td>
    <td>55555</td>
    <td>666666</td>
    <td>777777</td>
    <td>888888</td>
    <td>999999</td>
    <td>1010101</td>
    <td>1111111</td>
    <td>121212</td>
   </tr>
   
  <tr>
    <td>111111</td>
    <td>222222</td>
    <td>33333333</td>
    <td>444444</td>
    <td>55555</td>
    <td>666666</td>
    <td>777777</td>
    <td>888888</td>
    <td>999999</td>
    <td>1010101</td>
    <td>1111111</td>
    <td>121212</td>
   </tr>
   <tr>
    <td>111111</td>
    <td>222222</td>
    <td>33333333</td>
    <td>444444</td>
    <td>55555</td>
    <td>666666</td>
    <td>777777</td>
    <td>888888</td>
    <td>999999</td>
    <td>1010101</td>
    <td>1111111</td>
    <td>121212</td>
   </tr>
   <tr>
    <td>111111</td>
    <td>222222</td>
    <td>33333333</td>
    <td>444444</td>
    <td>55555</td>
    <td>666666</td>
    <td>777777</td>
    <td>888888</td>
    <td>999999</td>
    <td>1010101</td>
    <td>1111111</td>
    <td>121212</td>
   </tr>
   <tr>
    <td>111111</td>
    <td>222222</td>
    <td>33333333</td>
    <td>444444</td>
    <td>55555</td>
    <td>666666</td>
    <td>777777</td>
    <td>888888</td>
    <td>999999</td>
    <td>1010101</td>
    <td>1111111</td>
    <td>121212</td>
   </tr>
   
  <tr>
    <td>111111</td>
    <td>222222</td>
    <td>33333333</td>
    <td>444444</td>
    <td>55555</td>
    <td>666666</td>
    <td>777777</td>
    <td>888888</td>
    <td>999999</td>
    <td>1010101</td>
    <td>1111111</td>
    <td>121212</td>
   </tr>
   <tr>
    <td>111111</td>
    <td>222222</td>
    <td>33333333</td>
    <td>444444</td>
    <td>55555</td>
    <td>666666</td>
    <td>777777</td>
    <td>888888</td>
    <td>999999</td>
    <td>1010101</td>
    <td>1111111</td>
    <td>121212</td>
   </tr>
  <tr>
    <td>111111</td>
    <td>222222</td>
    <td>33333333</td>
    <td>444444</td>
    <td>55555</td>
    <td>666666</td>
    <td>777777</td>
    <td>888888</td>
    <td>999999</td>
    <td>1010101</td>
    <td>1111111</td>
    <td>121212</td>
   </tr>
   <tr>
    <td>111111</td>
    <td>222222</td>
    <td>33333333</td>
    <td>444444</td>
    <td>55555</td>
    <td>666666</td>
    <td>777777</td>
    <td>888888</td>
    <td>999999</td>
    <td>1010101</td>
    <td>1111111</td>
    <td>121212</td>
   </tr>
   
  <tr>
    <td>111111</td>
    <td>222222</td>
    <td>33333333</td>
    <td>444444</td>
    <td>55555</td>
    <td>666666</td>
    <td>777777</td>
    <td>888888</td>
    <td>999999</td>
    <td>1010101</td>
    <td>1111111</td>
    <td>121212</td>
   </tr>
   <tr>
    <td>111111</td>
    <td>222222</td>
    <td>33333333</td>
    <td>444444</td>
    <td>55555</td>
    <td>666666</td>
    <td>777777</td>
    <td>888888</td>
    <td>999999</td>
    <td>1010101</td>
    <td>1111111</td>
    <td>121212</td>
   </tr>
   <tr>
    <td>111111</td>
    <td>222222</td>
    <td>33333333</td>
    <td>444444</td>
    <td>55555</td>
    <td>666666</td>
    <td>777777</td>
    <td>888888</td>
    <td>999999</td>
    <td>1010101</td>
    <td>1111111</td>
    <td>121212</td>
   </tr>
   <tr>
    <td>111111</td>
    <td>222222</td>
    <td>33333333</td>
    <td>444444</td>
    <td>55555</td>
    <td>666666</td>
    <td>777777</td>
    <td>888888</td>
    <td>999999</td>
    <td>1010101</td>
    <td>1111111</td>
    <td>121212</td>
   </tr>
   
  <tr>
    <td>111111</td>
    <td>222222</td>
    <td>33333333</td>
    <td>444444</td>
    <td>55555</td>
    <td>666666</td>
    <td>777777</td>
    <td>888888</td>
    <td>999999</td>
    <td>1010101</td>
    <td>1111111</td>
    <td>121212</td>
   </tr>
   <tr>
    <td>111111</td>
    <td>222222</td>
    <td>33333333</td>
    <td>444444</td>
    <td>55555</td>
    <td>666666</td>
    <td>777777</td>
    <td>888888</td>
    <td>999999</td>
    <td>1010101</td>
    <td>1111111</td>
    <td>121212</td>
   </tr>
  <tr>
    <td>111111</td>
    <td>222222</td>
    <td>33333333</td>
    <td>444444</td>
    <td>55555</td>
    <td>666666</td>
    <td>777777</td>
    <td>888888</td>
    <td>999999</td>
    <td>1010101</td>
    <td>1111111</td>
    <td>121212</td>
   </tr>
   <tr>
    <td>111111</td>
    <td>222222</td>
    <td>33333333</td>
    <td>444444</td>
    <td>55555</td>
    <td>666666</td>
    <td>777777</td>
    <td>888888</td>
    <td>999999</td>
    <td>1010101</td>
    <td>1111111</td>
    <td>121212</td>
   </tr>
   
  <tr>
    <td>111111</td>
    <td>222222</td>
    <td>33333333</td>
    <td>444444</td>
    <td>55555</td>
    <td>666666</td>
    <td>777777</td>
    <td>888888</td>
    <td>999999</td>
    <td>1010101</td>
    <td>1111111</td>
    <td>121212</td>
   </tr>
   <tr>
    <td>111111</td>
    <td>222222</td>
    <td>33333333</td>
    <td>444444</td>
    <td>55555</td>
    <td>666666</td>
    <td>777777</td>
    <td>888888</td>
    <td>999999</td>
    <td>1010101</td>
    <td>1111111</td>
    <td>121212</td>
   </tr>
   <tr>
    <td>111111</td>
    <td>222222</td>
    <td>33333333</td>
    <td>444444</td>
    <td>55555</td>
    <td>666666</td>
    <td>777777</td>
    <td>888888</td>
    <td>999999</td>
    <td>1010101</td>
    <td>1111111</td>
    <td>121212</td>
   </tr>
   <tr>
    <td>111111</td>
    <td>222222</td>
    <td>33333333</td>
    <td>444444</td>
    <td>55555</td>
    <td>666666</td>
    <td>777777</td>
    <td>888888</td>
    <td>999999</td>
    <td>1010101</td>
    <td>1111111</td>
    <td>121212</td>
   </tr>
   
  <tr>
    <td>111111</td>
    <td>222222</td>
    <td>33333333</td>
    <td>444444</td>
    <td>55555</td>
    <td>666666</td>
    <td>777777</td>
    <td>888888</td>
    <td>999999</td>
    <td>1010101</td>
    <td>1111111</td>
    <td>121212</td>
   </tr>
   <tr>
    <td>111111</td>
    <td>222222</td>
    <td>33333333</td>
    <td>444444</td>
    <td>55555</td>
    <td>666666</td>
    <td>777777</td>
    <td>888888</td>
    <td>999999</td>
    <td>1010101</td>
    <td>1111111</td>
    <td>121212</td>
   </tr>
  <tr>
    <td>111111</td>
    <td>222222</td>
    <td>33333333</td>
    <td>444444</td>
    <td>55555</td>
    <td>666666</td>
    <td>777777</td>
    <td>888888</td>
    <td>999999</td>
    <td>1010101</td>
    <td>1111111</td>
    <td>121212</td>
   </tr>
   <tr>
    <td>111111</td>
    <td>222222</td>
    <td>33333333</td>
    <td>444444</td>
    <td>55555</td>
    <td>666666</td>
    <td>777777</td>
    <td>888888</td>
    <td>999999</td>
    <td>1010101</td>
    <td>1111111</td>
    <td>121212</td>
   </tr>
   
  <tr>
    <td>111111</td>
    <td>222222</td>
    <td>33333333</td>
    <td>444444</td>
    <td>55555</td>
    <td>666666</td>
    <td>777777</td>
    <td>888888</td>
    <td>999999</td>
    <td>1010101</td>
    <td>1111111</td>
    <td>121212</td>
   </tr>
   <tr>
    <td>111111</td>
    <td>222222</td>
    <td>33333333</td>
    <td>444444</td>
    <td>55555</td>
    <td>666666</td>
    <td>777777</td>
    <td>888888</td>
    <td>999999</td>
    <td>1010101</td>
    <td>1111111</td>
    <td>121212</td>
   </tr>
   <tr>
    <td>111111</td>
    <td>222222</td>
    <td>33333333</td>
    <td>444444</td>
    <td>55555</td>
    <td>666666</td>
    <td>777777</td>
    <td>888888</td>
    <td>999999</td>
    <td>1010101</td>
    <td>1111111</td>
    <td>121212</td>
   </tr>
   <tr>
    <td>111111</td>
    <td>222222</td>
    <td>33333333</td>
    <td>444444</td>
    <td>55555</td>
    <td>666666</td>
    <td>777777</td>
    <td>888888</td>
    <td>999999</td>
    <td>1010101</td>
    <td>1111111</td>
    <td>121212</td>
   </tr>
   
  <tr>
    <td>111111</td>
    <td>222222</td>
    <td>33333333</td>
    <td>444444</td>
    <td>55555</td>
    <td>666666</td>
    <td>777777</td>
    <td>888888</td>
    <td>999999</td>
    <td>1010101</td>
    <td>1111111</td>
    <td>121212</td>
   </tr>
   <tr>
    <td>111111</td>
    <td>222222</td>
    <td>33333333</td>
    <td>444444</td>
    <td>55555</td>
    <td>666666</td>
    <td>777777</td>
    <td>888888</td>
    <td>999999</td>
    <td>1010101</td>
    <td>1111111</td>
    <td>121212</td>
   </tr>
</table>
</body>
</html>

When I run that code here is what I get:


In order to keep the title fixed on top of page while scrollin I added the area a line that says:

Briefly speaking: I dont know how to make an header row of a table fixed on top of table while scrolling.
I’ll be grateful if someone helps me with that.
Thanks

If you are using Bootstrap,

set the table header class like this:

<tr class= "myHeader navbar-fixed-top">

this function is for navs I know, but give it a shot

I fear you should be using some kindg of fixed table header plugin.
What they mostly do is create a second table that is fixed, and copy the header html in it

So you have two tables.
one with header data
one with body data.

It should be with javascript, as there is semantically no good way to fix this pure in html & css.

Hi,

Maybe you can solve it like PaulO’B suggests for Firefox in his post #1 in this seven year old quiz:

2 Likes

So why doesn’t it have <thead> and <tbody> tags the way all proper tables are supposed to have?

Thank you, I’m not using boostrap/

Thanks, I’ll check js possibility.

Hi felgal,
It is because I hadn’t written HTML code since a long time and all of a sudden I had to use it in order to show data properly inside a PHP application.
Thanks for your remark. My future tables will never lack , and again.

Hi Eric
I adopted your solution (PaulO’B’s) and use it as prototype for future tables. Since there is no “All rights reserved” symbol I hope PaulO’B tolerate me for using his code…

All my demo code is free to use (at your own risk) and you can use or modify it as you like :slight_smile:

7 Likes

You are so useful to the society :smile:

3 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.