Solved

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

Posted on 2006-11-09
2
11,563 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
2 Comments
 
LVL 19

Accepted Solution

by:
VoteyDisciple earned 250 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

Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

Join & Write a Comment

Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…

743 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now