[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>
반응형
저작자표시
:

티스토리툴바