| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | ||
| 6 | 7 | 8 | 9 | 10 | 11 | 12 |
| 13 | 14 | 15 | 16 | 17 | 18 | 19 |
| 20 | 21 | 22 | 23 | 24 | 25 | 26 |
| 27 | 28 | 29 | 30 | 31 |
- JQM
- 퍼블리셔
- 레이어
- 더블마진
- Scripting.FileSystemObject
- 사파리
- 헤더고정
- jquery mobile
- 제이쿼리모바일
- HTML
- 이미지
- rowspan
- UI개발
- DataTable
- ie6버그
- Object
- nextSibling
- 셀렉트박스
- datatables.js
- publisher
- 제이쿼리
- FRONT-END
- 하이브리드앱
- entity
- CSS
- 테이블
- 한영변환
- 크롬
- ime-mode
- Front end 개발
- Today
- Total
느리게 걷기
헤더 고정 테이블 스크롤 본문
테이블을 스크롤 시킬 때 헤더를 고정시키고 싶다면.
dataTable.js 같은 플러그인을 사용할 수도 있으나,
개인적으로 원하는 스타일을 찾지 못하여 직접 구현해보았다.
예제 : https://jsfiddle.net/0Lvp2r2p/1/
<!DOCTYPE html>
<html lang="ko">
<head>
<title>fixed header table scroll</title>
<meta charset="utf-8" />
<style>
* {margin:0;padding:0;}
html,body {height:100%;}
body {font-size:14px;}
/* 기본 테이블 스타일 */
.table {width:100%;border-collapse: separate;border-spacing: 0;}
.table thead th {height:30px;background:#eee;border-top:2px solid #333;border-bottom:1px solid #ccc;}
.table tbody td {height:34px;background:#fff;border-bottom:1px solid #ccc;text-align: center;}
.table thead th:first-child,
.table tbody td:first-child {border-left-width: 1px;}
/* 스크롤 스타일 정의 */
.table-fixed-header-wrap {
position: relative;box-sizing: border-box;padding-top:33px; /* 기준점과 헤더영역 확보 */
width:500px;height:100%;margin:0 auto; /* 디자인에 따라 가로 세로 값 설정 */
}
.table-fixed-header-wrap .fixed-header-scroll {height:300px;overflow-x:hidden;overflow-y:auto;} /* 실제 스크롤 영역 설정 */
.table-fixed-header-wrap .fixed-header-bg {
position:absolute;left:0;top:0;width:100%; /* 헤더영역 위치 */
height:30px;background:#eee;border-top:2px solid #333;border-bottom:1px solid #ccc; /* 테이블 헤더와 동일한 스타일 적용 */
}
.table-fixed-header-wrap .fixed-th {position: absolute;top:8px;} /* th 하위의 타이틀 위치 설정 */
.table-fixed-header-wrap .table thead th {height:0;border:none;} /* 실제 테이블의 th 는 가림 */
</style>
</head>
<body>
<div class="table-fixed-header-wrap"><!-- 헤더 위치할 기준점 position: relative; -->
<div class="fixed-header-scroll"><!-- 스크롤영역 : position 속성을 주면 안됨 -->
<div class="fixed-header-bg"></div><!-- 헤더 스타일 -->
<table class="table"><!-- 일반 테이블 스타일 -->
<thead>
<tr><!-- th 와 하위 fixed-th 의 width 값을 동일하게 설정해준다 -->
<th style="width:20%;"><div class="fixed-th" style="width:20%;">제목1</div></th>
<th style="width:20%;"><div class="fixed-th" style="width:20%;">제목2</div></th>
<th style="width:20%;"><div class="fixed-th" style="width:20%;">제목3</div></th>
<th style="width:20%;"><div class="fixed-th" style="width:20%;">제목4</div></th>
<th style="width:20%;"><div class="fixed-th" style="width:20%;">제목5</div></th>
</tr>
</thead>
<tbody>
<tr>
<td>셀1</td>
<td>셀2</td>
<td>셀3</td>
<td>셀4</td>
<td>셀5</td>
</tr>
<tr>
<td>셀1</td>
<td>셀2</td>
<td>셀3</td>
<td>셀4</td>
<td>셀5</td>
</tr>
<tr>
<td>셀1</td>
<td>셀2</td>
<td>셀3</td>
<td>셀4</td>
<td>셀5</td>
</tr>
<tr>
<td>셀1</td>
<td>셀2</td>
<td>셀3</td>
<td>셀4</td>
<td>셀5</td>
</tr>
<tr>
<td>셀1</td>
<td>셀2</td>
<td>셀3</td>
<td>셀4</td>
<td>셀5</td>
</tr>
<tr>
<td>셀1</td>
<td>셀2</td>
<td>셀3</td>
<td>셀4</td>
<td>셀5</td>
</tr>
</tbody>
</table>
<p>브라우저 높이를 줄여보세요</p>
</div>
</div>
</body>
</html>
'HTML/5' 카테고리의 다른 글
| [img]크롬,사파리에서 alt 텍스트 표시안됨 (0) | 2013.02.14 |
|---|---|
| Massive List of HTML5 & CSS3 Resources (0) | 2012.09.28 |
| HTML 특수문자표 ( HTML Entity Reference for Common Characters ) (0) | 2012.09.17 |
| 에디터플러스 젠코딩(Zen Coding) (0) | 2012.05.23 |
| 플래시 위로 레이어 띄우기 (0) | 2012.05.07 |