본문 바로가기
Programming/HTML/CSS

테이블 틀 고정

by 막이 2014. 3. 5.
<style type="text/css">
#tablefixed {table-layout:fixed;}
</style>

<table border="0" cellspacing="0" cellpadding="0" width="300" id="tablefixed">
    <tr valign="top">
        <td >
            <table  border="1"  style="margin-right:-1;">
                <tr >
                    <td >고정셀1</td>
                    <td >고정셀2</td>
                    <td >고정셀3</td>
                    <td >고정셀4</td>
                </tr>
              
            </table>
        </td>
        <td >
            <div style="width:200;overflow-x:auto;">
                <table border="1">
                    <tr >
                       <%
                       int i=0;
                        for(i = 0; i<100; i++){
                            %>
                             <td>셀<%=i %></td>
                           <%} 
                       %>
                    </tr>
                </table>
            </div>
        </td>
    </tr>
    
    <tr>
     <td><br></td>
    </tr>
    
    <tr>
     <td>
      <table  border="1"  style="margin-right:-1;">
                <tr >
                    <td>고정셀1</td>
                </tr>
               <tr >
                    <td>고정셀2</td>
                </tr>
                <tr >
                    <td>고정셀3</td>
                </tr>
                <tr >
                    <td>고정셀4</td>
                </tr>
              
            </table>
    
     <div style="height:200px;overflow-y:auto;">
                <table border="1">
                    
                       <%
                        i=0;
                        for(i = 0; i<100; i++){
                            %>
                             <tr><td>셀<%=i %></td></tr>
                           <%} 
                       %>
                    
                </table>
            </div>
    
    </tr>
</table>

</body>
</html>




가장 크게 보면은 테이블 안에 테이블을 넣어서 안에 있는 테이블을 고정시키는 방법이다.
css로 가장 큰 테이블을 pix시킨다.
안에는 각각의 테이블의 크기를 지정해주면되는것. 당연히 틀고정은 크기에 맞게 되는것이고 움직이는 테이블은
자신이 가지고 있는 셀보다 크기를 작게해서  스크롤바만 생기게 하면 되는거.
x,y축은 단지 <tr> or <td> 차이일 뿐이다.