Where The Streets Have No Name

틀고정 본문

Developement/Web

틀고정

highheat 2006. 8. 10. 11:56

<STYLE>
.main_table {
  border           : solid;
  border-color     : black black #000000;
  border-width     : 0px 0px 0px 0px;
  background-color : #000000;
  text-align       : center;
  font-size        : 8pt;
  table-layout     : fixed;
}
.main_head {
  background-color : yellow;
}
.main_body {
  background-color : #FFFFFF;
}
.main_foot {
  background-color : green;
}
</STYLE>
<TABLE cellpadding="0" cellspacing="0" border="0">
<TR>
 <TD width="100">
  <TABLE cellspacing="1" cellpadding="0" border="0" class="main_table">
      <THEAD>
          <TR height="25" class="main_head">
              <TD>Contens</TD>
          </TR>
      </THEAD>
  </TABLE>
 </TD>
 <TD width="545">
 <DIV id="topLine" style="width:545px;overflow:hidden;">
  <TABLE width="640" cellspacing="1" cellpadding="0" border="0" class="main_table">
      <THEAD>
          <TR height="25" class="main_head">
              <TD>AAA</TD>
              <TD>BBB</TD>
              <TD>CCC</TD>
              <TD>DDD</TD>
              <TD>EEE</TD>
              <TD>FFF</TD>
          </TR>
      </THEAD>
  </TABLE>
 </DIV>
 </TD>
</TR>
<TR>
 <TD  width="100">
 <DIV id="leftDisplay" style="width:100px; height: 120px; overflow: hidden;">
  <TABLE cellspacing="1" cellpadding="0" border="0" class="main_table">
         <TR height="20" class="main_head">
             <TD>AAA1</TD>
         </TR>
         <TR height="20" class="main_head">
             <TD>AAA1</TD>
         </TR>
         <TR height="20" class="main_head">
             <TD>AAA1</TD>
         </TR>
         <TR height="20" class="main_head">
             <TD>AAA1</TD>
         </TR>
         <TR height="20" class="main_head">
             <TD>AAA1</TD>
         </TR>
         <TR height="20" class="main_head">
             <TD>AAA1</TD>
         </TR>
         <TR height="20" class="main_head">
             <TD>AAA1</TD>
         </TR>
         <TR height="20" class="main_head">
             <TD>AAA1</TD>
         </TR>
     </TABLE>
 </DIV>
 </TD>
 <TD width="640">
 <DIV id="mainDisplay" style="width:560px;height:120px;overflow-y:scroll;overflow-x:hidden" onscroll="scrollY()">
     <TABLE width="640" cellspacing="1" cellpadding="0" border="0" class="main_table">
         <TR height="20" class="main_body">
             <TD>AAA1</TD>
             <TD>BBB2</TD>
             <TD>CCC3</TD>
             <TD>DDD1</TD>
             <TD>EEE2</TD>
             <TD>FFF3</TD>
         </TR>
         <TR height="20" class="main_body">
             <TD>AAA1</TD>
             <TD>BBB2</TD>
             <TD>CCC3</TD>
             <TD>DDD1</TD>
             <TD>EEE2</TD>
             <TD>FFF3</TD>
         </TR>
         <TR height="20" class="main_body">
             <TD>AAA1</TD>
             <TD>BBB2</TD>
             <TD>CCC3</TD>
             <TD>DDD1</TD>
             <TD>EEE2</TD>
             <TD>FFF3</TD>
         </TR>
         <TR height="20" class="main_body">
             <TD>AAA1</TD>
             <TD>BBB2</TD>
             <TD>CCC3</TD>
             <TD>DDD1</TD>
             <TD>EEE2</TD>
             <TD>FFF3</TD>
         </TR>
         <TR height="20" class="main_body">
             <TD>AAA1</TD>
             <TD>BBB2</TD>
             <TD>CCC3</TD>
             <TD>DDD1</TD>
             <TD>EEE2</TD>
             <TD>FFF3</TD>
         </TR>
         <TR height="20" class="main_body">
             <TD>AAA1</TD>
             <TD>BBB2</TD>
             <TD>CCC3</TD>
             <TD>DDD1</TD>
             <TD>EEE2</TD>
             <TD>FFF3</TD>
         </TR>
         <TR height="20" class="main_body">
             <TD>AAA1</TD>
             <TD>BBB2</TD>
             <TD>CCC3</TD>
             <TD>DDD1</TD>
             <TD>EEE2</TD>
             <TD>FFF3</TD>
         </TR>
         <TR height="20" class="main_body">
             <TD>AAA1</TD>
             <TD>BBB2</TD>
             <TD>CCC3</TD>
             <TD>DDD1</TD>
             <TD>EEE2</TD>
             <TD>FFF3</TD>
         </TR>
     </TABLE>
 </DIV>
 </TD>
</TR>
<TR>
 <TD width="100" valign="top">
  <TABLE cellspacing="1" cellpadding="0" border="0" class="main_table">
         <TR height="25" class="main_foot">
             <TD>SUM</TD>
         </TR>
  </TABLE>
 </TD>
 <TD width="545">
 <DIV id="bottomLine" style="width:545px;overflow-x:scroll;overflow-y:hidden;" onscroll="scrollX()">
 <TABLE width="640" cellspacing="1" cellpadding="0" border="0" class="main_table">
        <TR height="25" class="main_foot">
            <TD>100,000</TD>
            <TD>100,000</TD>
            <TD>100,000</TD>
            <TD>100,000</TD>
            <TD>100,000</TD>
            <TD>100,000</TD>
        </TR>
 </TABLE>
 </DIV>
 </TD>
</TR>
</TABLE>
<SCRIPT>
function scrollX() {
 document.all.mainDisplay.scrollLeft = document.all.bottomLine.scrollLeft;
 document.all.topLine.scrollLeft = document.all.bottomLine.scrollLeft;
}
function scrollY() {
 document.all.leftDisplay.scrollTop = document.all.mainDisplay.scrollTop;
}
</SCRIPT>
'Developement/Web' Related Articles more