본문 바로가기

web/HTML

html 테이블 틀고정

이미 개발이 끝난 다음에 view를 바꾼다는건..ㅜㅡㅜ 이래서 mvc패턴을 써야 하나보다
 다른 분들은 첨부터 쓰면서 하시길..ㅜㅡㅜ



<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
</head>
<body>

<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> 차이일 뿐이다.