[HTML] - 테이블 Header 고정 예제
카테고리 없음 2011. 10. 11. 09:43반응형
<html> <head> <script language="javascript"> function scrollAll() { document.all.leftDisplay.scrollTop = document.all.mainDisplay.scrollTop; document.all.topLine.scrollLeft = document.all.mainDisplay.scrollLeft; } </script> </head> <body> <TABLE cellpadding="0" cellspacing="0" border="0"> <TR> <TD width="100"> <TABLE cellspacing="1" cellpadding="0" border="0"> <TR height="25"> <TD>abcd</TD> </TR> </TABLE> </TD> <TD width="543"> <DIV id="topLine" style="width:543px;overflow:hidden;"> <TABLE width="640" cellspacing="1" cellpadding="0" border="0"> <TR height="25"> <TD>AAA</TD> <TD>BBB</TD> <TD>CCC</TD> <TD>DDD</TD> <TD>EEE</TD> <TD>FFF</TD> </TR> </TABLE> </DIV> </TD> </TR> <TR> <TD width="100" valign="top"> <DIV id="leftDisplay" style="width:100px; height: 127px; overflow: hidden;"> <TABLE cellspacing="1" cellpadding="0" border="0"> <TR height="20"> <TD>AAA1</TD> </TR> <TR height="20"> <TD>AAA1</TD> </TR> <TR height="20"> <TD>AAA1</TD> </TR> <TR height="20"> <TD>AAA1</TD> </TR> <TR height="20"> <TD>AAA1</TD> </TR> <TR height="20"> <TD>AAA1</TD> </TR> <TR height="20"> <TD>AAA1</TD> </TR> <TR height="20"> <TD>AAA1</TD> </TR> </TABLE> </DIV> </TD> <TD width="640" valign="top"> <DIV id="mainDisplay" style="width:560px;height:144px;overflow:scroll" onscroll="scrollAll()"> <TABLE width="640" cellspacing="1" cellpadding="0" border="0"> <TR height="20"> <TD>AAA1</TD> <TD>BBB2</TD> <TD>CCC3</TD> <TD>DDD1</TD> <TD>EEE2</TD> <TD>FFF3</TD> </TR> <TR height="20"> <TD>AAA1</TD> <TD>BBB2</TD> <TD>CCC3</TD> <TD>DDD1</TD> <TD>EEE2</TD> <TD>FFF3</TD> </TR> <TR height="20"> <TD>AAA1</TD> <TD>BBB2</TD> <TD>CCC3</TD> <TD>DDD1</TD> <TD>EEE2</TD> <TD>FFF3</TD> </TR> <TR height="20"> <TD>AAA1</TD> <TD>BBB2</TD> <TD>CCC3</TD> <TD>DDD1</TD> <TD>EEE2</TD> <TD>FFF3</TD> </TR> <TR height="20"> <TD>AAA1</TD> <TD>BBB2</TD> <TD>CCC3</TD> <TD>DDD1</TD> <TD>EEE2</TD> <TD>FFF3</TD> </TR> <TR height="20"> <TD>AAA1</TD> <TD>BBB2</TD> <TD>CCC3</TD> <TD>DDD1</TD> <TD>EEE2</TD> <TD>FFF3</TD> </TR> <TR height="20"> <TD>AAA1</TD> <TD>BBB2</TD> <TD>CCC3</TD> <TD>DDD1</TD> <TD>EEE2</TD> <TD>FFF3</TD> </TR> <TR height="20"> <TD>AAA1</TD> <TD>BBB2</TD> <TD>CCC3</TD> <TD>DDD1</TD> <TD>EEE2</TD> <TD>FFF3</TD> </TR> </TABLE> </DIV> </TD> </TR> </TABLE> </body> </html> |
반응형