INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Jobs

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

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

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

(OP)
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.

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

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

http://webmaster-talk.eu/articles/8-website-develo...

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.

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

(OP)
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/

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

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.

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

Here is a nice, simple JQuery plugin you can use as well:
http://www.fixedheadertable.com/

Red Flag This Post

Please let us know here why this post is inappropriate. Reasons such as off-topic, duplicates, flames, illegal, vulgar, or students posting their homework.

Red Flag Submitted

Thank you for helping keep Tek-Tips Forums free from inappropriate posts.
The Tek-Tips staff will check this out and take appropriate action.

Reply To This Thread

Posting in the Tek-Tips forums is a member-only feature.

Click Here to join Tek-Tips and talk with other members!

Resources

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close