/* 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 위에 다른 컨텐츠들이 존재하는 경우 헤더가 비정상적으로 보여지는 부분 때문에 주석 처리함.
'HTML 이야기' 카테고리의 다른 글
테이블 헤더 고정 후 스크롤 처리 (0) | 2015.11.17 |
---|---|
HTML5 Canvas 가지고 놀기 2번째!! (0) | 2012.06.05 |
HTML5 Web Worker (0) | 2012.06.04 |
HTML5 Storage (0) | 2012.06.04 |
HTML5 Canvas 가지고 놀기~! (0) | 2012.05.31 |