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

lupidol · Sep 8, 2016

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:

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 <style> area a line that says:

Code:

tr.myHeader {position:fixed}

This is what the "tr {position: fixed} page" looks like:

the header row became shorter then the data rows and when scrolling it hides the data line on top.
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.

ChrisHirst · Sep 8, 2016

Give the header row position: absolute or fixed inside a position: relative container

http://webmaster-talk.eu/articles/8-website-development-and-design/13-css-positioning

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.

Never mind these jesus character, stars had to die for me to live.

lupidol · Sep 10, 2016

Hi ChrisHirst
Thank you for your responding.
This is my new style:

Code:

<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; position: relative} 
tr.myHeader {position: fixed} 
</style>]

Unfortunately, the header behaves as before. Something wrong in the way I put it?
Thanks/

Olaf Doschke · Sep 20, 2016

As a fixed header isn't part of the rest of table rows, you can't expect similar spacing of widths, you have to handle this yourself.
Even when fixing that problem, you won't be able to let the scrolled up rows disappear above the fixed header, the table will scroll through and appear on top, unless you hide the space above the table header to browser top via another fixed intransparent element. The only way to avoid that is putting that body part of the table into it's own clipping div with scrollbar, eg as in

http://imaputz.com/cssStuff/bigFourVersion.html

Bye, Olaf.

jbenson001 · Sep 20, 2016

Here is a nice, simple JQuery plugin you can use as well:

http://www.fixedheadertable.com/

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

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

lupidol

Programmer

ChrisHirst

IS-IT--Management

lupidol

Programmer

Olaf Doschke

Programmer

jbenson001

Programmer

Similar threads

Part and Inventory Search

Sponsor