mathew_s
asked on
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.getEle mentById(" 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:col lapse;widt h: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' >
</td>
<td class='ee100' >
</td>
<td class='ee100' >
</td>
<td class='ee100' >
</td>
<td class='ee100' >
</td>
<td class='ee100' >
</td>
<td class='ee100' >
</td>
<td class='ee100' >
</td>
<td class='ee100' >
</td>
<td class='ee100' >
</td>
<td class='ee100' >
</td>
<td class='ee100' >
</td>
<td class='ee100' >
</td>
<td class='ee100' >
</td>
<td class='ee100' >
</td>
<td class='ee100' >
</td>
<td class='ee100' >
</td>
<td class='ee100' >
</td>
<td class='ee100' >
</td>
<td class='ee100' >
</td>
<td class='ee100' >
</td>
<td class='ee100' >
</td>
<td class='ee100' >
</td>
<td class='ee100' >
</td>
<td class='ee100' >
</td>
</tr>
<tr style='height:14pt'>
<td class='ee103' >
</td>
<td class='ee100' colspan="2" >
</td>
<td class='ee109' colspan="9" >
My No's
</td>
<td class='ee100' colspan="13" >
</td>
</tr>
<tr style='height:14pt'>
<td class='ee103' colspan="2" >
</td>
<td class='ee112' >
</td>
<td class='ee115' >
TOTAL
</td>
<td class='ee118' >
<input value="" name="Res1" id="Res1" type="text"
onblur="recalc_onclick('Re s1')" tabindex="1"
style=" width:96% "
class='ee119' >
</td>
<td class='ee118' >
<input value="" name="Res2" id="Res2" type="text"
onblur="recalc_onclick('Re s2')" tabindex="2"
style=" width:96% "
class='ee119' >
</td>
<td class='ee118' >
<input value="" name="Res3" id="Res3" type="text"
onblur="recalc_onclick('Re s3')" tabindex="3"
style=" width:96% "
class='ee119' >
</td>
<td class='ee118' >
<input value="" name="Res4" id="Res4" type="text"
onblur="recalc_onclick('Re s4')" tabindex="4"
style=" width:96% "
class='ee119' >
</td>
<td class='ee118' >
<input value="" name="Res5" id="Res5" type="text"
onblur="recalc_onclick('Re s5')" tabindex="5"
style=" width:96% "
class='ee119' >
</td>
<td class='ee118' >
<input value="" name="Res6" id="Res6" type="text"
onblur="recalc_onclick('Re s6')" tabindex="6"
style=" width:96% "
class='ee119' >
</td>
<td class='ee118' >
<input value="" name="Res7" id="Res7" type="text"
onblur="recalc_onclick('Re s7')" tabindex="7"
style=" width:96% "
class='ee119' >
</td>
<td class='ee118' >
<input value="" name="Res8" id="Res8" type="text"
onblur="recalc_onclick('Re s8')" tabindex="8"
style=" width:96% "
class='ee119' >
</td>
<td class='ee118' >
<input value="" name="Res9" id="Res9" type="text"
onblur="recalc_onclick('Re s9')" tabindex="9"
style=" width:96% "
class='ee119' >
</td>
<td class='ee118' >
<input value="" name="Res10" id="Res10" type="text"
onblur="recalc_onclick('Re s10')" tabindex="10"
style=" width:96% "
class='ee119' >
</td>
<td class='ee118' >
<input value="" name="Res11" id="Res11" type="text"
onblur="recalc_onclick('Re s11')" tabindex="11"
style=" width:96% "
class='ee119' >
</td>
<td class='ee118' >
<input value="" name="Res12" id="Res12" type="text"
onblur="recalc_onclick('Re s12')" tabindex="12"
style=" width:96% "
class='ee119' >
</td>
<td class='ee118' >
<input value="" name="Res13" id="Res13" type="text"
onblur="recalc_onclick('Re s13')" tabindex="13"
style=" width:96% "
class='ee119' >
</td>
<td class='ee118' >
<input value="" name="Res14" id="Res14" type="text"
onblur="recalc_onclick('Re s14')" tabindex="14"
style=" width:96% "
class='ee119' >
</td>
<td class='ee118' >
<input value="" name="Res15" id="Res15" type="text"
onblur="recalc_onclick('Re s15')" tabindex="15"
style=" width:96% "
class='ee119' >
</td>
<td class='ee118' >
<input value="" name="Res16" id="Res16" type="text"
onblur="recalc_onclick('Re s16')" tabindex="16"
style=" width:96% "
class='ee119' >
</td>
<td class='ee118' >
<input value="" name="Res17" id="Res17" type="text"
onblur="recalc_onclick('Re s17')" tabindex="17"
style=" width:96% "
class='ee119' >
</td>
<td class='ee118' >
<input value="" name="Res18" id="Res18" type="text"
onblur="recalc_onclick('Re s18')" tabindex="18"
style=" width:96% "
class='ee119' >
</td>
<td class='ee118' >
<input value="" name="Res19" id="Res19" type="text"
onblur="recalc_onclick('Re s19')" tabindex="19"
style=" width:96% "
class='ee119' >
</td>
<td class='ee118' >
<input value="" name="Res20" id="Res20" type="text"
onblur="recalc_onclick('Re s20')" tabindex="20"
style=" width:96% "
class='ee119' >
</td>
<td class='ee100' >
</td>
</tr>
</thead>
<!--End of Freeze Header-->
<tr style='height:13pt'>
......keeps going.......
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.getEle
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:col
<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' >
</td>
<td class='ee100' >
</td>
<td class='ee100' >
</td>
<td class='ee100' >
</td>
<td class='ee100' >
</td>
<td class='ee100' >
</td>
<td class='ee100' >
</td>
<td class='ee100' >
</td>
<td class='ee100' >
</td>
<td class='ee100' >
</td>
<td class='ee100' >
</td>
<td class='ee100' >
</td>
<td class='ee100' >
</td>
<td class='ee100' >
</td>
<td class='ee100' >
</td>
<td class='ee100' >
</td>
<td class='ee100' >
</td>
<td class='ee100' >
</td>
<td class='ee100' >
</td>
<td class='ee100' >
</td>
<td class='ee100' >
</td>
<td class='ee100' >
</td>
<td class='ee100' >
</td>
<td class='ee100' >
</td>
<td class='ee100' >
</td>
</tr>
<tr style='height:14pt'>
<td class='ee103' >
</td>
<td class='ee100' colspan="2" >
</td>
<td class='ee109' colspan="9" >
My No's
</td>
<td class='ee100' colspan="13" >
</td>
</tr>
<tr style='height:14pt'>
<td class='ee103' colspan="2" >
</td>
<td class='ee112' >
</td>
<td class='ee115' >
TOTAL
</td>
<td class='ee118' >
<input value="" name="Res1" id="Res1" type="text"
onblur="recalc_onclick('Re
style=" width:96% "
class='ee119' >
</td>
<td class='ee118' >
<input value="" name="Res2" id="Res2" type="text"
onblur="recalc_onclick('Re
style=" width:96% "
class='ee119' >
</td>
<td class='ee118' >
<input value="" name="Res3" id="Res3" type="text"
onblur="recalc_onclick('Re
style=" width:96% "
class='ee119' >
</td>
<td class='ee118' >
<input value="" name="Res4" id="Res4" type="text"
onblur="recalc_onclick('Re
style=" width:96% "
class='ee119' >
</td>
<td class='ee118' >
<input value="" name="Res5" id="Res5" type="text"
onblur="recalc_onclick('Re
style=" width:96% "
class='ee119' >
</td>
<td class='ee118' >
<input value="" name="Res6" id="Res6" type="text"
onblur="recalc_onclick('Re
style=" width:96% "
class='ee119' >
</td>
<td class='ee118' >
<input value="" name="Res7" id="Res7" type="text"
onblur="recalc_onclick('Re
style=" width:96% "
class='ee119' >
</td>
<td class='ee118' >
<input value="" name="Res8" id="Res8" type="text"
onblur="recalc_onclick('Re
style=" width:96% "
class='ee119' >
</td>
<td class='ee118' >
<input value="" name="Res9" id="Res9" type="text"
onblur="recalc_onclick('Re
style=" width:96% "
class='ee119' >
</td>
<td class='ee118' >
<input value="" name="Res10" id="Res10" type="text"
onblur="recalc_onclick('Re
style=" width:96% "
class='ee119' >
</td>
<td class='ee118' >
<input value="" name="Res11" id="Res11" type="text"
onblur="recalc_onclick('Re
style=" width:96% "
class='ee119' >
</td>
<td class='ee118' >
<input value="" name="Res12" id="Res12" type="text"
onblur="recalc_onclick('Re
style=" width:96% "
class='ee119' >
</td>
<td class='ee118' >
<input value="" name="Res13" id="Res13" type="text"
onblur="recalc_onclick('Re
style=" width:96% "
class='ee119' >
</td>
<td class='ee118' >
<input value="" name="Res14" id="Res14" type="text"
onblur="recalc_onclick('Re
style=" width:96% "
class='ee119' >
</td>
<td class='ee118' >
<input value="" name="Res15" id="Res15" type="text"
onblur="recalc_onclick('Re
style=" width:96% "
class='ee119' >
</td>
<td class='ee118' >
<input value="" name="Res16" id="Res16" type="text"
onblur="recalc_onclick('Re
style=" width:96% "
class='ee119' >
</td>
<td class='ee118' >
<input value="" name="Res17" id="Res17" type="text"
onblur="recalc_onclick('Re
style=" width:96% "
class='ee119' >
</td>
<td class='ee118' >
<input value="" name="Res18" id="Res18" type="text"
onblur="recalc_onclick('Re
style=" width:96% "
class='ee119' >
</td>
<td class='ee118' >
<input value="" name="Res19" id="Res19" type="text"
onblur="recalc_onclick('Re
style=" width:96% "
class='ee119' >
</td>
<td class='ee118' >
<input value="" name="Res20" id="Res20" type="text"
onblur="recalc_onclick('Re
style=" width:96% "
class='ee119' >
</td>
<td class='ee100' >
</td>
</tr>
</thead>
<!--End of Freeze Header-->
<tr style='height:13pt'>
......keeps going.......
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER