Advertisement

11.09.2006 at 06:52AM PST, ID: 22054766
[x]
Attachment Details
[x]
The Solution Rating System

With so many solutions, how can you tell which solutions are most likely to help you and which ones are not? To provide you with a tool to use, we rate our solutions based on various elements that most accurately determine if a solution is a quality solution. To explain what factors affect the solution rating, here are the elements we take into consideration when formulating our solution rating.

  • The Grade of the Solution
  • The Zone Rank of the Expert Providing the Solution
  • The Number of Author and Expert Comments
  • The Number of Experts Contributing
  • The Feedback of the Community

Your Input Matters
Because of the way the system is set up, the most important variable in this equation is you. As a member of Experts Exchange, you are able to cast your vote on the quality of the solutions in regard to how complete, accurate, helpful and easy to understand each solution is. When you provide your feedback, each rating is adjusted accordingly. So, if you see a solution that has a poor rating that you think is a good solution, let us know by rating it. As you do, the rating will be adjusted and will become more accurate for other members of our site.

If you have any suggestions that you would like to make for our rating system, please ask a question in the Suggestions Zone of Community Support.

Thank you!
8.2

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

Asked by mathew_s in Cascading Style Sheets (CSS)

Tags: , , ,

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.......Start Free Trial
[+][-]11.09.2006 at 07:18AM PST, ID: 17906651

View this solution now by starting your 7-day free trial. Setting up your free trial is quick, easy, and secure. We will return you to this solution, unlocked, when you're done.

 

About this solution

Zone: Cascading Style Sheets (CSS)
Tags: freeze, table, header, excel
Sign Up Now!
Solution Provided By: VoteyDisciple
Participating Experts: 1
Solution Grade: B
 
 
[+][-]11.09.2006 at 12:37PM PST, ID: 17909248

Often, when Experts are collaborating with members who have asked questions, they will request additional information about the problem. Askers respond with an author comment like this one.

Start your 7-day free trial to view this Author Comment or ask the Experts your question.

 
 
Loading Advertisement...
20081112-EE-VQP-42