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

deotpit · September 8, 2016, 7:32am

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

Sora_Keyheart · September 8, 2016, 7:41am

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

Experience_Matters · September 8, 2016, 7:43am

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.

Erik_J · September 8, 2016, 9:30am

Hi,

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

felgall · September 8, 2016, 9:55pm

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

deotpit · September 10, 2016, 8:13am

Thank you, I’m not using boostrap/

deotpit · September 10, 2016, 8:14am

Thanks, I’ll check js possibility.

deotpit · September 10, 2016, 8:46am

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.

deotpit · September 10, 2016, 8:49am

PaulOB · September 10, 2016, 9:03am

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

deotpit · September 10, 2016, 9:32am

You are so useful to the society

system · December 12, 2016, 7:24pm

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