메뉴 건너뛰기

kode2.com

CSS로 테이블 행 및 열 고정 처리

2019.02.18 15:46

kode2 조회 수:51

/* CSS */

 

.tblTitle{

   position:absolute;

/*    top:0px;

    margin-bottom:30px; */

    background:lightblue;

}

td, th{

    padding:5px;

    height:40px;

    width:40px;

    font-size:14px;

}

 

#vertical_scrolling_div{

    display:inline-block;

    zoom: 1;

    *display:inline;

/*    padding-top:40px; */

    height:300px;

    overflow-y: scroll;

    overflow-x: hidden;

}

 

#freeze_container{

    display:inline-block;

    zoom: 1;

    *display:inline;

    vertical-align:top;

    width:100px;

}

#horizontal_scrolling_div{

    display:inline-block;

    zoom: 1;

    *display:inline;

    width:200px;

    overflow-x:scroll;

    vertical-align:top;

}

 

.freeze_table{   

    background-color: #0099dd;

    z-index:2;

}

 

#left_table{

    width:100px;

}

 

#inner_table{

    width:400px;

    overflow:hidden;

}

 

 

 

/* HTML */

 

<div id="vertical_scrolling_div">

    <div id="freeze_container">

        <table id="left_table" class="freeze_table">

            <tr class='tblTitle'>

                <th>Title 1</th>

                <th>Title 2</th>

            </tr>

        </table>

    </div>

    <div id="horizontal_scrolling_div">

        <table id="inner_table">

            <tr class='tblTitle'>

                <th>Title 3</th>

                <th>Title 4</th>

                <th>Title 5</th>

                <th>Title 6</th>

            </tr>

        </table>

    </div>

</div>

 

 

 

/* Script */

 

 

 

$(function(){  

    function getRows(rows, cols){

        var rowString="";

        for(var i=0;i<cols;i++){

            rowString+="<tr>"; 

            for(var j=0;j<rows;j++){

                rowString+="<td>"+j+","+i+"</td>";

            }

            rowString+="</tr>"; 

        }

        return rowString;

    }

    

    $("#left_table").append(getRows(2,10));

    $("#inner_table").append(getRows(8,10));

});

 

 

 

CSS만 사용해서 테이블의 헤더 영역과 특정 컬럼을 고정하는 방법.

[출처 : http://jsfiddle.net/C8Dtf/81/]

 

 

헤더 영역 고정이야 늘 그렇듯 단순하게 처리하는 방법으로는

테이블 태그를 2개를 사용해 헤더 영역과 컨텐츠 영역으로 나누는 방법이 제일 간단하겠다.

 

 

그런데 여기에 특정 컬럼을 고정해야 하는 경우가 필요한데, 다른 플러그인은 사용하기 싫고 -_-ㅋ

그저 CSS로 조져보겠다는 생각이 무럭무럭 자라날때 사용하면 되겠다.

 

* 붉은 색으로 표시된 부분은 원본 소스에서 주석처리한 부분으로

div 위에 다른 컨텐츠들이 존재하는 경우 헤더가 비정상적으로 보여지는 부분 때문에 주석 처리함.