?
Solved

How to Freeze Table Header without using additional scrollbars (like Excel)

Posted on 2006-11-09
2
Medium Priority
?
11,582 Views
Last Modified: 2012-08-13
I am hoping someone can help me here. I have a large HTML table and would like to freeze the first few rows that are in the THEAD tag. Scrolling down the table using the existing scrollbars in the browser while ensuring the header rows are still visible (like Excel when you freeze panes). If you scroll to the right the header rows should stay frozen and not follow.
FYI: It is OK if the solution is custom to IE as this is what my clients have.

This is what I had in my CSS but it does not do anything. I am not sure what I am doing here anyways as I am not strong in CSS:

/* Locks table header */
thead {
font-size: 14px;
font-weight: bold;
text-align: center;
background-color: navy;
color: white;
border-right: 1px solid silver;
position:relative;
cursor: default;
/*IE5+ only*/
top: expression(document.getElementById("divtable").scrollTop-2);
z-index: 10;
}
/* Keeps the header as the top most item. Important for top left item*/
thead.locked {z-index: 99;}



Here is a part of the HTML that concerns me. Note that much of the HTML was generated from a program. Again I would like to keep the stuff in the THEAD tags frozen on the screen while scrolling down. The header should not follow when scrolling to the right. (ie: like freezing panes in Excel):

<div id="divtable" style='display:block'>
     <table  style='border-collapse:collapse;width:2024pt'  border="0" cellspacing="0" cellpadding="0" bgcolor="#FFFFFF" >
       <col width="14.00" />
       <col width="164.00" />
       <col width="76.00" />
       <col width="98.00" />
       <col width="83.00" />
       <col width="83.00" />
       <col width="83.00" />
       <col width="83.00" />
       <col width="83.00" />
       <col width="83.00" />
       <col width="83.00" />
       <col width="83.00" />
       <col width="83.00" />
       <col width="83.00" />
       <col width="83.00" />
       <col width="83.00" />
       <col width="83.00" />
       <col width="83.00" />
       <col width="83.00" />
       <col width="83.00" />
       <col width="83.00" />
       <col width="83.00" />
       <col width="83.00" />
       <col width="83.00" />
       <col width="12.00" />
       <!--start of freeze header-->
       <thead>
             <tr style='height:13pt'>
                     <td    class='ee100'    >
                  &nbsp;
                     </td>
                     <td    class='ee100'    >
                  &nbsp;
                     </td>
                     <td    class='ee100'    >
                  &nbsp;
                     </td>
                     <td    class='ee100'    >
                  &nbsp;
                     </td>
                     <td    class='ee100'    >
                  &nbsp;
                     </td>
                     <td    class='ee100'    >
                  &nbsp;
                     </td>
                     <td    class='ee100'    >
                  &nbsp;
                     </td>
                     <td    class='ee100'    >
                  &nbsp;
                     </td>
                     <td    class='ee100'    >
                  &nbsp;
                     </td>
                     <td    class='ee100'    >
                  &nbsp;
                     </td>
                     <td    class='ee100'    >
                  &nbsp;
                     </td>
                     <td    class='ee100'    >
                  &nbsp;
                     </td>
                     <td    class='ee100'    >
                  &nbsp;
                     </td>
                     <td    class='ee100'    >
                  &nbsp;
                     </td>
                     <td    class='ee100'    >
                  &nbsp;
                     </td>
                     <td    class='ee100'    >
                  &nbsp;
                     </td>
                     <td    class='ee100'    >
                  &nbsp;
                     </td>
                     <td    class='ee100'    >
                  &nbsp;
                     </td>
                     <td    class='ee100'    >
                  &nbsp;
                     </td>
                     <td    class='ee100'    >
                  &nbsp;
                     </td>
                     <td    class='ee100'    >
                  &nbsp;
                     </td>
                     <td    class='ee100'    >
                  &nbsp;
                     </td>
                     <td    class='ee100'    >
                  &nbsp;
                     </td>
                     <td    class='ee100'    >
                  &nbsp;
                     </td>
                     <td    class='ee100'    >
                  &nbsp;
                     </td>
               </tr>  

             <tr style='height:14pt'>
                     <td    class='ee103'    >
                  &nbsp;
                     </td>
                     <td    class='ee100'   colspan="2" >
                  &nbsp;
                     </td>
                     <td    class='ee109'   colspan="9" >
                  My No's
                     </td>
                     <td    class='ee100'   colspan="13" >
                  &nbsp;
                     </td>
             </tr>
            
            
             <tr style='height:14pt'>
                     <td    class='ee103'   colspan="2" >
                  &nbsp;
                     </td>
                     <td    class='ee112'    >
                  &nbsp;
                     </td>
                     <td    class='ee115'    >
                  TOTAL
                     </td>
                     <td    class='ee118'    >
                       <input value="" name="Res1" id="Res1" type="text"
                        onblur="recalc_onclick('Res1')" tabindex="1"
                        style=" width:96% "
          class='ee119' >
                     </td>
                     <td    class='ee118'    >
                       <input value="" name="Res2" id="Res2" type="text"
                        onblur="recalc_onclick('Res2')" tabindex="2"
                        style=" width:96% "
          class='ee119' >
                     </td>
                     <td    class='ee118'    >
                       <input value="" name="Res3" id="Res3" type="text"
                        onblur="recalc_onclick('Res3')" tabindex="3"
                        style=" width:96% "
          class='ee119' >
                     </td>
                     <td    class='ee118'    >
                       <input value="" name="Res4" id="Res4" type="text"
                        onblur="recalc_onclick('Res4')" tabindex="4"
                        style=" width:96% "
          class='ee119' >
                     </td>
                     <td    class='ee118'    >
                       <input value="" name="Res5" id="Res5" type="text"
                        onblur="recalc_onclick('Res5')" tabindex="5"
                        style=" width:96% "
          class='ee119' >
                     </td>
                     <td    class='ee118'    >
                       <input value="" name="Res6" id="Res6" type="text"
                        onblur="recalc_onclick('Res6')" tabindex="6"
                        style=" width:96% "
          class='ee119' >
                     </td>
                     <td    class='ee118'    >
                       <input value="" name="Res7" id="Res7" type="text"
                        onblur="recalc_onclick('Res7')" tabindex="7"
                        style=" width:96% "
          class='ee119' >
                     </td>
                     <td    class='ee118'    >
                       <input value="" name="Res8" id="Res8" type="text"
                        onblur="recalc_onclick('Res8')" tabindex="8"
                        style=" width:96% "
          class='ee119' >
                     </td>
                     <td    class='ee118'    >
                       <input value="" name="Res9" id="Res9" type="text"
                        onblur="recalc_onclick('Res9')" tabindex="9"
                        style=" width:96% "
          class='ee119' >
                     </td>
                     <td    class='ee118'    >
                       <input value="" name="Res10" id="Res10" type="text"
                        onblur="recalc_onclick('Res10')" tabindex="10"
                        style=" width:96% "
          class='ee119' >
                     </td>
                     <td    class='ee118'    >
                       <input value="" name="Res11" id="Res11" type="text"
                        onblur="recalc_onclick('Res11')" tabindex="11"
                        style=" width:96% "
          class='ee119' >
                     </td>
                     <td    class='ee118'    >
                       <input value="" name="Res12" id="Res12" type="text"
                        onblur="recalc_onclick('Res12')" tabindex="12"
                        style=" width:96% "
          class='ee119' >
                     </td>
                     <td    class='ee118'    >
                       <input value="" name="Res13" id="Res13" type="text"
                        onblur="recalc_onclick('Res13')" tabindex="13"
                        style=" width:96% "
          class='ee119' >
                     </td>
                     <td    class='ee118'    >
                       <input value="" name="Res14" id="Res14" type="text"
                        onblur="recalc_onclick('Res14')" tabindex="14"
                        style=" width:96% "
          class='ee119' >
                     </td>
                     <td    class='ee118'    >
                       <input value="" name="Res15" id="Res15" type="text"
                        onblur="recalc_onclick('Res15')" tabindex="15"
                        style=" width:96% "
          class='ee119' >
                     </td>
                     <td    class='ee118'    >
                       <input value="" name="Res16" id="Res16" type="text"
                        onblur="recalc_onclick('Res16')" tabindex="16"
                        style=" width:96% "
          class='ee119' >
                     </td>
                     <td    class='ee118'    >
                       <input value="" name="Res17" id="Res17" type="text"
                        onblur="recalc_onclick('Res17')" tabindex="17"
                        style=" width:96% "
          class='ee119' >
                     </td>
                     <td    class='ee118'    >
                       <input value="" name="Res18" id="Res18" type="text"
                        onblur="recalc_onclick('Res18')" tabindex="18"
                        style=" width:96% "
          class='ee119' >
                     </td>
                     <td    class='ee118'    >
                       <input value="" name="Res19" id="Res19" type="text"
                        onblur="recalc_onclick('Res19')" tabindex="19"
                        style=" width:96% "
          class='ee119' >
                     </td>
                     <td    class='ee118'    >
                       <input value="" name="Res20" id="Res20" type="text"
                        onblur="recalc_onclick('Res20')" tabindex="20"
                        style=" width:96% "
          class='ee119' >
                     </td>
                     <td    class='ee100'    >
                  &nbsp;
                     </td>
             </tr>
             </thead>             
             <!--End of Freeze Header-->
            
             <tr style='height:13pt'>
                       ......keeps going.......
0
Comment
Question by:mathew_s
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
2 Comments
 
LVL 19

Accepted Solution

by:
VoteyDisciple earned 750 total points
ID: 17906651
Why, CSS has just the thing for you.  Set position: fixed; give an explicit left: and top: coordinate for the header row, and presto, it stays put no matter what the user does.

It's absolutely perfect, except the one tiny little insignificant glitch that it doesn't work at all in MSIE.  Oh, wait...

I remembered seeing a link in this ( http://www.experts-exchange.com/Web/Web_Languages/CSS/Q_22053719.html ) question recently that suggests a viable workaround for MSIE; you may want to take a look at: http://www.cssplay.co.uk/layouts/fixed.html


If no "position: fixed;" workaround does the trick in IE, then the only alternative may be to use Javascript.
0
 
LVL 1

Author Comment

by:mathew_s
ID: 17909248
Thank you very much for the link. I was able to do what I wanted.
0

Featured Post

[Webinar] Lessons on Recovering from Petya

Skyport is working hard to help customers recover from recent attacks, like the Petya worm. This work has brought to light some important lessons. New malware attacks like this can take down your entire environment. Learn from others mistakes on how to prevent Petya like worms.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Suggested Courses
Course of the Month10 days, 10 hours left to enroll

765 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question