?
Solved

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

Posted on 2006-11-09
2
Medium Priority
?
11,585 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

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

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

CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
Suggested Courses

649 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