틀고정 테이블 샘플1 - bami74/me GitHub Wiki

<HTML>
<HEAD>
<TITLE>E-Launch</TITLE>
<link rel="stylesheet" type="text/css" href="css/default.css"/>
<link rel="stylesheet" type="text/css" href="css/main.css"/>
<link rel="stylesheet" type="text/css" href="css/page.css"/>
<script language="javascript">
function tableScrolling() {
 
 document.getElementById('nonScrollTable').scrollTop = document.getElementById('scrollTable').scrollTop;
 document.getElementById('topTable').scrollLeft = document.getElementById('scrollTable').scrollLeft;
}
</script>
</HEAD>
<body class="BodyArea">
<!--전체를 감싸는 테이블 -->
<table width="100%" height="100%" style="table-layout:fixed;">
 <tr>
  <td style="vertical-align:top">
   <!--왼쪽 전체 감싸는 테이블 (100%-17pixel 만들기 위한 테이블) -->
   <table height="100%" style="width:100%;table-layout:fixed;">
    <tr>
     <td style="height:22px">
      <!--왼쪽 타이틀 고정 테이블 -->
      <table class="normalList">
       <colgroup>
        <col width="30">
        <col>
       </colgroup>
       <tr>
        <th>No.</th>
        <th>subject</th>
       </tr>
      </table>
     </td>
    </tr>
    <tr>
     <td>
      <!--왼쪽 내용 테이블-->
      <div id="nonScrollTable"  style="height:100%; overflow:hidden;">
      <table class="normalList" >
       <colgroup>
        <col width="30">
        <col>
       </colgroup>
       <tr>
        <td>11</td>
        <td>aaaaaaa</td>
       </tr>
       <tr>
        <td>11</td>
        <td>bbbbbbb</td>
       </tr>
       <tr>
        <td>11</td>
        <td>ccccccc</td>
       </tr>
       <tr>
        <td>11</td>
        <td>ddddddd</td>
       </tr>
        <tr>
        <td>11</td>
        <td>aaaaaaa</td>
       </tr>
       <tr>
        <td>11</td>
        <td>bbbbbbb</td>
       </tr>
       <tr>
        <td>11</td>
        <td>ccccccc</td>
       </tr>
       <tr>
        <td>11</td>
        <td>ddddddd</td>
       </tr> <tr>
        <td>11</td>
        <td>aaaaaaa</td>
       </tr>
       <tr>
        <td>11</td>
        <td>bbbbbbb</td>
       </tr>
       <tr>
        <td>11</td>
        <td>ccccccc</td>
       </tr>
       <tr>
        <td>11</td>
        <td>ddddddd</td>
       </tr>
        <tr>
        <td>11</td>
        <td>aaaaaaa</td>
       </tr>
       <tr>
        <td>11</td>
        <td>bbbbbbb</td>
       </tr>
       <tr>
        <td>11</td>
        <td>ccccccc</td>
       </tr>
       <tr>
        <td>11</td>
        <td>ddddddd</td>
       </tr>
        <tr>
        <td>11</td>
        <td>aaaaaaa</td>
       </tr>
       <tr>
        <td>11</td>
        <td>bbbbbbb</td>
       </tr>
       <tr>
        <td>11</td>
        <td>ccccccc</td>
       </tr>
       <tr>
        <td>11</td>
        <td>ddddddd</td>
       </tr>
        <tr>
        <td>11</td>
        <td>aaaaaaa</td>
       </tr>
       <tr>
        <td>11</td>
        <td>bbbbbbb</td>
       </tr>
       <tr>
        <td>11</td>
        <td>ccccccc</td>
       </tr>
       <tr>
        <td>11</td>
        <td>ddddddd</td>
       </tr>
        <tr>
        <td>11</td>
        <td>aaaaaaa</td>
       </tr>
       <tr>
        <td>11</td>
        <td>bbbbbbb</td>
       </tr>
       <tr>
        <td>11</td>
        <td>ccccccc</td>
       </tr>
       <tr>
        <td>11</td>
        <td>ddddddd</td>
       </tr>
        <tr>
        <td>11</td>
        <td>aaaaaaa</td>
       </tr>
       <tr>
        <td>11</td>
        <td>bbbbbbb</td>
       </tr>
       <tr>
        <td>11</td>
        <td>ccccccc</td>
       </tr>
       <tr>
        <td>11</td>
        <td>ddddddd</td>
       </tr>
      </table>
      </div>
     </td>
    </tr>
    <tr>
     <td style="height:17px;"></td><!--스크롤자리 17pixel-->
    </tr>
   </table>
  </td>
  <td style="vertical-align:top;">
   <!--왼쪽 전체 감싸는 테이블 (100%-17pixel 만들기 위한 테이블) -->
   <table height="100%"  style="width:100%;table-layout:fixed;">
    <tr>
     <td style="height:22px">
      <!--오른쪽 타이틀 테이블-->
      <div id="topTable"  style="width:100%; overflow:hidden;">
      <table class="normalList">
       <colgroup>
        <col width="100">
        <col width="100">
        <col width="100">
        <col width="100">
        <col width="100">
        <col width="100">
       </colgroup>
       <tr>
        <th>subject</th>
        <th>subject</th>
        <th>subject</th>
        <th>subject</th>
        <th>subject</th>
        <th>subject</th>
       </tr>
      </table>
      </div>
     </td>
     <td style="width:17px;background-color:#D2D4E1;"></td><!--스크롤자리 17pixel-->
     <!--background="${IMAGES_PATH}/page/bg_ScrollSpace.gif" th/th2모두 사용 시 사용되는 background image-->
    </tr>
    <tr>
     <td colspan="2">
      <!--오른쪽 내용 테이블-->
      <div id="scrollTable" style="overflow-y:scroll;overflow-x:scroll; height:100%; width:100%;" onscroll="javascript:tableScrolling()">
      <table class="normalList"  style="text-overflow:ellipsis;overflow:visible;">
       <colgroup>
        <col width="100">
        <col width="100">
        <col width="100">
        <col width="100">
        <col width="100">
        <col width="100">
       </colgroup>
       <tr>
        <td>ccccccc</td>
        <td>ddddddd</td>
        <td>eeeeeee</td>
        <td>fffffff</td>
        <td>ggggggg</td>
        <td>hhhhhhh</td>
       </tr>
       <tr>
        <td>ccccccc</td>
        <td>ddddddd</td>
        <td>eeeeeee</td>
        <td>fffffff</td>
        <td>ggggggg</td>
        <td>hhhhhhh</td>
       </tr>
       <tr>
        <td>ccccccc</td>
        <td>ddddddd</td>
        <td>eeeeeee</td>
        <td>fffffff</td>
        <td>ggggggg</td>
        <td>hhhhhhh</td>
       </tr>
       <tr>
        <td>ccccccc</td>
        <td>ddddddd</td>
        <td>eeeeeee</td>
        <td>fffffff</td>
        <td>ggggggg</td>
        <td>hhhhhhh</td>
       </tr>
       <tr>
        <td>ccccccc</td>
        <td>ddddddd</td>
        <td>eeeeeee</td>
        <td>fffffff</td>
        <td>ggggggg</td>
        <td>hhhhhhh</td>
       </tr>
       <tr>
        <td>ccccccc</td>
        <td>ddddddd</td>
        <td>eeeeeee</td>
        <td>fffffff</td>
        <td>ggggggg</td>
        <td>hhhhhhh</td>
       </tr>
       <tr>
        <td>ccccccc</td>
        <td>ddddddd</td>
        <td>eeeeeee</td>
        <td>fffffff</td>
        <td>ggggggg</td>
        <td>hhhhhhh</td>
       </tr>
       <tr>
        <td>ccccccc</td>
        <td>ddddddd</td>
        <td>eeeeeee</td>
        <td>fffffff</td>
        <td>ggggggg</td>
        <td>hhhhhhh</td>
       </tr>
       <tr>
        <td>ccccccc</td>
        <td>ddddddd</td>
        <td>eeeeeee</td>
        <td>fffffff</td>
        <td>ggggggg</td>
        <td>hhhhhhh</td>
       </tr>
       <tr>
        <td>ccccccc</td>
        <td>ddddddd</td>
        <td>eeeeeee</td>
        <td>fffffff</td>
        <td>ggggggg</td>
        <td>hhhhhhh</td>
       </tr>
       <tr>
        <td>ccccccc</td>
        <td>ddddddd</td>
        <td>eeeeeee</td>
        <td>fffffff</td>
        <td>ggggggg</td>
        <td>hhhhhhh</td>
       </tr>
       <tr>
        <td>ccccccc</td>
        <td>ddddddd</td>
        <td>eeeeeee</td>
        <td>fffffff</td>
        <td>ggggggg</td>
        <td>hhhhhhh</td>
       </tr>
       <tr>
        <td>ccccccc</td>
        <td>ddddddd</td>
        <td>eeeeeee</td>
        <td>fffffff</td>
        <td>ggggggg</td>
        <td>hhhhhhh</td>
       </tr>
       <tr>
        <td>ccccccc</td>
        <td>ddddddd</td>
        <td>eeeeeee</td>
        <td>fffffff</td>
        <td>ggggggg</td>
        <td>hhhhhhh</td>
       </tr>
       <tr>
        <td>ccccccc</td>
        <td>ddddddd</td>
        <td>eeeeeee</td>
        <td>fffffff</td>
        <td>ggggggg</td>
        <td>hhhhhhh</td>
       </tr>
       <tr>
        <td>ccccccc</td>
        <td>ddddddd</td>
        <td>eeeeeee</td>
        <td>fffffff</td>
        <td>ggggggg</td>
        <td>hhhhhhh</td>
       </tr>
       <tr>
        <td>ccccccc</td>
        <td>ddddddd</td>
        <td>eeeeeee</td>
        <td>fffffff</td>
        <td>ggggggg</td>
        <td>hhhhhhh</td>
       </tr>
       <tr>
        <td>ccccccc</td>
        <td>ddddddd</td>
        <td>eeeeeee</td>
        <td>fffffff</td>
        <td>ggggggg</td>
        <td>hhhhhhh</td>
       </tr>
       <tr>
        <td>ccccccc</td>
        <td>ddddddd</td>
        <td>eeeeeee</td>
        <td>fffffff</td>
        <td>ggggggg</td>
        <td>hhhhhhh</td>
       </tr>
       <tr>
        <td>ccccccc</td>
        <td>ddddddd</td>
        <td>eeeeeee</td>
        <td>fffffff</td>
        <td>ggggggg</td>
        <td>hhhhhhh</td>
       </tr>
       <tr>
        <td>ccccccc</td>
        <td>ddddddd</td>
        <td>eeeeeee</td>
        <td>fffffff</td>
        <td>ggggggg</td>
        <td>hhhhhhh</td>
       </tr>
       <tr>
        <td>ccccccc</td>
        <td>ddddddd</td>
        <td>eeeeeee</td>
        <td>fffffff</td>
        <td>ggggggg</td>
        <td>hhhhhhh</td>
       </tr>
       <tr>
        <td>ccccccc</td>
        <td>ddddddd</td>
        <td>eeeeeee</td>
        <td>fffffff</td>
        <td>ggggggg</td>
        <td>hhhhhhh</td>
       </tr>
       <tr>
        <td>ccccccc</td>
        <td>ddddddd</td>
        <td>eeeeeee</td>
        <td>fffffff</td>
        <td>ggggggg</td>
        <td>hhhhhhh</td>
       </tr>
       <tr>
        <td>ccccccc</td>
        <td>ddddddd</td>
        <td>eeeeeee</td>
        <td>fffffff</td>
        <td>ggggggg</td>
        <td>hhhhhhh</td>
       </tr>
       <tr>
        <td>ccccccc</td>
        <td>ddddddd</td>
        <td>eeeeeee</td>
        <td>fffffff</td>
        <td>ggggggg</td>
        <td>hhhhhhh</td>
       </tr>
       <tr>
        <td>ccccccc</td>
        <td>ddddddd</td>
        <td>eeeeeee</td>
        <td>fffffff</td>
        <td>ggggggg</td>
        <td>hhhhhhh</td>
       </tr>
       <tr>
        <td>ccccccc</td>
        <td>ddddddd</td>
        <td>eeeeeee</td>
        <td>fffffff</td>
        <td>ggggggg</td>
        <td>hhhhhhh</td>
       </tr>
       <tr>
        <td>ccccccc</td>
        <td>ddddddd</td>
        <td>eeeeeee</td>
        <td>fffffff</td>
        <td>ggggggg</td>
        <td>hhhhhhh</td>
       </tr>
       <tr>
        <td>ccccccc</td>
        <td>ddddddd</td>
        <td>eeeeeee</td>
        <td>fffffff</td>
        <td>ggggggg</td>
        <td>hhhhhhh</td>
       </tr>
       <tr>
        <td>ccccccc</td>
        <td>ddddddd</td>
        <td>eeeeeee</td>
        <td>fffffff</td>
        <td>ggggggg</td>
        <td>hhhhhhh</td>
       </tr>
       <tr>
        <td>ccccccc</td>
        <td>ddddddd</td>
        <td>eeeeeee</td>
        <td>fffffff</td>
        <td>ggggggg</td>
        <td>hhhhhhh</td>
       </tr>
      </table>
      </div>
     </td>
    </tr>
   </table>
  </td>
 </tr>
</table>
</body>
</HTML>
⚠️ **GitHub.com Fallback** ⚠️