[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 11591
  • Last Modified:

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

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
mathew_s
Asked:
mathew_s
1 Solution
 
VoteyDiscipleCommented:
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
 
mathew_sAuthor Commented:
Thank you very much for the link. I was able to do what I wanted.
0

Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now