Code to fix the title column of a table by tricks

Source: Internet
Author: User
Tags expression header modify relative visibility window
Skills

<style>
table#headers {table-layout:fixed;background: #eea033;}
Table#data {table-layout:relative;background: #eea033;}
TD, Th {vertical-align:top;background: #ffffff;}
</style>
<script language= "JavaScript" >
var RH;
var fr;
var ds;
var HS;

function Syncscroll (e) {
Hs.scrollleft = Ds.scrollleft;
}

function Syncresize (e) {
Hs.style.width = ds.offsetwidth-(ds.offsetwidth-ds.clientwidth);

for (I =0 < rh.childNodes.length; i++) {
Rh.childnodes[i].width = Fr.childnodes[i].offsetwidth;
}
}

function init () {
RH = document.getElementById ("RH");
FR = document.getElementById ("fr");
ds = document.getElementById ("ds");
HS = document.getElementById ("HS");

Hs.style.top = Ds.offsettop;
Hs.style.left = Ds.offsetleft;
hs.style.visibility = ' visible ';
Ds.onscroll=syncscroll;
Window.onresize=syncresize;
Syncresize ();
}

</script>

<body >
<div style= "Width:90%;overflow:hidden;z-index=3;visibility:hidden;position:absolute" id= ' HS ' >
<table cellpadding= "0" cellspacing= "1" id= "Headers" >
&LT;TR id= ' RH ' >
<th>col1</th>
<th>col2</th>
<th>col3</th>
<th>col4</th>
<th>col5</th>
<th>col6</th>
<th>col7</th>
<th>col8</th>
<th>col9</th>
<th>col10</th>
</tr>
</table>
</div>
<div style= "width:90%;height:200px;overflow:auto;z-index=2;" Id= ' ds ' >
<table cellpadding= "0" cellspacing= "1" width= "100%" id= "Data" >
<tr id= ' FR ' >
<th>col1</th>
<th>col2</th>
<th>col3</th>
<th>col4</th>
<th>col5</th>
<th>col6</th>
<th>col7</th>
<th>col8</th>
<th>col9</th>
<th>col10</th>
</tr>
<tr>
<td>this is a width test--please tell me it works</td>
<td>this is a width test--please tell me it works</td>
<td>this is a width test--please tell me it works</td>
<td>this is a width test--please tell me it works</td>
<td>this is a width test--please tell me it works</td>
<td>thisisawidthtest--please tell me it works</td>
<td>this is a width test--please tell me it works</td>
<td>this is a width test--please tell me it works</td>
<td>this is a width test--please tell me it works</td>
<td>this is a width test--please tell me it works</td>
</tr>
<tr>
<td>this is a width test--please tell me it works</td>
<td>this is a width test--please tell me it works</td>
<td>this is a width test--please tell me it works</td>
<td>this is a width test--please tell me it works</td>
<td>this is a width test--please tell me it works</td>
<td>this is a width test--please tell me it works</td>
<td>this is a width test--please tell me it works</td>
<td>this is a width test--please tell me it works</td>
<td>this is a width test--please tell me it works</td>
<td>this is a width test--please tell me it works</td>
</tr>
<tr>
<td>this is a width test--please tell me it works</td>
<td>this is a width test--please tell me it works</td>
<td>this is a width test--please tell me it works</td>
<td>this is a width test--please tell me it works</td>
<td>this is a width test--please tell me it works</td>
<td>this is a width test--please tell me it works</td>
<td>this is a width test--please tell me it works</td>
<td>this is a width test--please tell me it works</td>
<td>this is a width test--please tell me it works</td>
<td>this is a width test--please tell me it works</td>
</tr>
</table>
</body>

<ptml><pead><style>table#headers {table-layout:fixed;background: #eea033;} Table#data {table-layout:relative;background: #eea033;} TD, Th {vertical-align:top;background: #ffffff;} </style><script language= "javascript" >var rh;var fr;var ds;var hs;function syncscroll (e) {hs.scrollLeft = Ds.scrollleft;} function Syncresize (e) {hs.style.width = ds.offsetwidth-(ds.offsetwidth-ds.clientwidth); For (i =0 i < rh.childNodes.length; i++) {rh.childnodes[i].width = Fr.childnodes[i].offsetwidth; }}function init () {RH = document.getElementById ("RH"); FR = document.getElementById ("fr"); ds = document.getElementById ("ds"); HS = document.getElementById ("HS"); Hs.style.top = Ds.offsettop; Hs.style.left = Ds.offsetleft; hs.style.visibility = ' visible '; Ds.onscroll=syncscroll; Window.onresize=syncresize; Syncresize ();} </script></pead><body ><div style= "Width:90%;overflow:hidden;z-index=3;visibility:hidden; Position:absolute; "Id="HS ' ><table cellpadding= "0" cellspacing= "1" id= "headers" ><tr id= ' RH ' ><th>col1</th><th >col2</th><th>col3</th><th>col4</th><th>col5</th><th>col6 </th><th>col7</th><th>col8</th><th>col9</th><th>col10</th ></tr></table></div><div style= "width:90%;height:200px;overflow:auto;z-index=2;" Id= ' DS ' ><table cellpadding= "0" cellspacing= "1" width= "100%" id= "Data" ><tr id= ' fr ' ><th>col1</th> <th>col2</th><th>col3</th><th>col4</th><th>col5</th><th> col6</th><th>col7</th><th>col8</th><th>col9</th><th>col10</ Th></tr><tr><td>this is a width test--please tell me it works</td><td>this is a width te st--please tell me it works</td><td>this are a width test--please tell me it works</tD><td>this is a width test--please tell me it works</td><td>this are a width test--please tell me it works</td><td>thisisawidthtest--please tell me it works</td><td>this are a width test--please te ll me it works</td><td>this is a-width test--please tell me it works</td><td>this is a width test --please tell me it works</td><td>this are a width test--please tell me it works</td></tr><tr& Gt;<td>this is a width test--please tell me it works</td><td>this are a width test--please tell me it w Orks</td><td>this is a width test--please tell me it works</td><td>this are a width test--please Tell me it works</td><td>this are a width test--please tell me it works</td><td>this is a width te st--please tell me it works</td><td>this are a width test--please tell me it works</td><td>this i s a width test--pleaseTell me it works</td><td>this are a width test--please tell me it works</td><td>this is a width te st--please tell me it works</td></tr><tr><td>this are a width test--please tell me it works</t D><td>this is a width test--please tell me it works</td><td>this are a width test--please tell me it Works</td><td>this is a width test--please tell me it works</td><td>this is a width test--pleas e tell me it works</td><td>this are a width test--please tell me it works</td><td>this is a width test--please tell me it works</td><td>this are a width test--please tell me it works</td><td>this is a width test--please tell me it works</td><td>this are a width test--please tell me it WORKS&LT;/TD&GT;&L T;/tr></table></body></ptml>

[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]

<body>
<div style= "overflow:auto;height:100px;" >
<table width= "100%" >
<tr style= "position:relative;top:expression (this.offsetParent.scrollTop); background:navy;color:white;" >
<th Nowrap>header a</th>
<th Nowrap>header b</th>
<th Nowrap>header c</th>
</TR>
<TR>
<TD>A</TD>
<TD>B</TD>
<TD>C</TD>
</TR>
<TR>
<TD>A</TD>
<TD>B</TD>
<TD>C</TD>
</TR>
<TR>
<TD>A</TD>
<TD>B</TD>
<TD>C</TD>
</TR>
<TR>
<TD>A</TD>
<TD>B</TD>
<TD>C</TD>
</TR>
<TR>
<TD>A</TD>
<TD>B</TD>
<TD>C</TD>
</TR>
<TR>
<TD>A</TD>
<TD>B</TD>
<TD>C</TD>
</TR>
<TR>
<TD>A</TD>
<TD>B</TD>
<TD>C</TD>
</TR>
<TR>
<TD>A</TD>
<TD>B</TD>
<TD>C</TD>
</TR>
<TR>
<TD>A</TD>
<TD>B</TD>
<TD>C</TD>
</TR>
</table>
</div>
</body>

<ptml> <body> <div style= "overflow:auto;height:100px;" > <table width= "100%" > <tr style= "position:relative;top:expression (THIS.OFFSETPARENT.SCROLLTOP); backgr Ound:navy;color:white; " > <th nowrap>header a</th> <th nowrap>header b</th> <th nowrap>header C</T h> </TR> <TR> <TD>A</TD> <TD>B</TD> <TD>C</TD> </TR> <TR> <TD>A</TD> <TD>B</TD> <TD>C</TD> </tr&gt ; <TR> <TD>A</TD> <TD>B</TD> <TD>C</TD> </TR> <TR> <TD>A</TD> <TD>B</TD> <TD>C</TD> </TR> <TR> <t d>a</td> <TD>B</TD> <TD>C</TD> </TR> <TR> <TD>A< /TD> <TD>B</TD> &LT;TD&GT c</td> </TR> <TR> <TD>A</TD> <TD>B</TD> &LT;TD&GT;C&LT;/TD&G T </TR> <TR> <TD>A</TD> <TD>B</TD> <TD>C</TD> </tr&gt ; <TR> <TD>A</TD> <TD>B</TD> <TD>C</TD> </TR> </table > </div> </body></ptml>

[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]

Related Article

Alibaba Cloud 10 Year Anniversary

With You, We are Shaping a Digital World, 2009-2019

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.