HTML 테이블 tbody 스크롤 적용, head 고정3 > html

본문 바로가기

html

HTML 테이블 tbody 스크롤 적용, head 고정3

작성일 19-05-09 09:29

페이지 정보

작성자서방님 조회 482회 댓글 0건

본문

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="utf-8">
	<title>html 테이블(Table) 헤더 고정 본문(tbody) 스크롤</title>
<style>
/* reset CSS ====================================== */	
/* font */
@font-face {
  font-family: "맑은 고딕", "Malgun Gothic", "NgB";
  font-style: normal;
  font-weight: 700;
  src: url(http://themes.googleusercontent.com/static/fonts/earlyaccess/nanumgothic/v4/NanumGothic-Bold.eot);
  src: url(http://themes.googleusercontent.com/static/fonts/earlyaccess/nanumgothic/v4/NanumGothic-Bold.eot?#iefix) format('embedded-opentype'),
       url(http://themes.googleusercontent.com/static/fonts/earlyaccess/nanumgothic/v4/NanumGothic-Bold.woff2) format('woff2'),
       url(http://themes.googleusercontent.com/static/fonts/earlyaccess/nanumgothic/v4/NanumGothic-Bold.woff) format('woff'),
       url(http://themes.googleusercontent.com/static/fonts/earlyaccess/nanumgothic/v4/NanumGothic-Bold.ttf) format('truetype');
}
html, body, blockquote, caption, dd, div, dl, dt, fieldset, form, frame, h1, h2, h3, h4, h5, h6, hr, iframe, input, legend, li, object, ol, p, pre, q, select, table, textarea, tr, td, ul {margin:0;padding:0; }
body, input, textarea {font-style:normal; font-weight:normal; font-size:12px; line-height:1.4; font-family:"맑은 고딕", "Malgun Gothic", "NgB", dotum, arial; color:#666;}
ul, ol, dl {list-style:none;}
table {border-collapse:collapse; border:0; empty-cells:show; border-spacing:0; padding:0;}
th, td {vertical-align:middle;}
fieldset {border:0;}
img {border:0; vertical-align:top;}
/*h1, h2, h3, h4, h5, h6 {font-size:100%; font-weight:normal;}*/
address, caption, em, strong, th {font-style:normal; font-weight:normal;}
a {color:#4c4c4c; text-decoration:none; background:transparent;}
a:link, a:focus, a:active, a:visited, a:hover {color:inherit; *color:#4c4c4c;}

hr {position:absolute; visibility:hidden; width:0; height:0px; border:0;}
legend {position:absolute; visibility:hidden; overflow:hidden; width:0; height:0; line-height:0; font-size:0;}
caption {visibility:hidden; overflow:hidden; width:0; height:0; line-height:0; font-size:0; text-indent:-3000em;}

input, select, label {vertical-align:middle;}
input:focus {color:inherit; *color:#4c4c4c;}
textarea {width:100%; padding:6px 7px; border:1px solid #c6c6c6; *padding:1%; *width:97%; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; resize:none /* size fix for webkit engine browser */;}
input[type="text"], 
input[type="password"] {height:22px; padding:0 0 0 5px; border:1px solid #c6c6c6; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; *height:21px; *padding:0;}
input[type="button"], 
button {height:22px; padding:0 5px; border:1px solid #c6c6c6; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; *height:21px; *padding:0;}
input[type="radio"], 
input[type="checkbox"] {margin-top:-2px; *margin-right:0;}
label input[type="radio"],
label input[type="checkbox"] {margin-right:5px;}
input[type="file"], 
select {height:22px;}

input::-webkit-input-placeholder	{color:#8d97a6;} /* Webkit */
input:-moz-placeholder				{color:#8d97a6;} /* Firefox 4-18 */
input::-moz-placeholder				{color:#8d97a6;} /* Firefox 19+ */
input:-ms-input-placeholder			{color:#8d97a6;} /* IE10+ */

.clearfix {*zoom:1;}
.clearfix:after {content:""; display:block; clear:both;}
.hide {visibility:hidden; overflow:hidden; position:absolute; width:0; height:0; font-size:0; line-height:0;}



/* table Header 고정 tbody scroll ====================================== */	
    .fixed-table-container { /*테이블 고정 container width와 height는 공용으로 사용하기 위해 html단에서 지정 */ 
        /*width: 800px;height: 200px;*/
        position: relative;
        padding-top: 30px; /* header-bg height값 */
    }
    .fixed-table-header-bg { /*헤더(타이틀 영역)*/
    		border-top:1px solid #3b3f2c; 
    		border-bottom:1px solid #3b3f2c;
    		text-align:center;
    		color:#666; 
    		background:#ecf5fc; 
    		font-weight:bold;
        height: 30px; /* header-bg height값 */
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        /*border-bottom: 1px solid #000;*/
    }
    .fixed-table-wrapper {
        overflow-x: hidden;
        overflow-y: auto;
        height: 100%;
    }
    table.fixed-table {
        width: 100%;
        border-collapse: collapse;
    }
    table.fixed-table td {
        border-bottom: 1px solid #DDD;
				height:30px; padding:3px 10px 2px;
        text-align:center;
        color:#666;
    }
    table.fixed-table td + td {
        border-left: 1px solid #DDD;
    }
    table.fixed-table th {
        padding: 0px; /* reset */
        
    }
    table.fixed-table .th-text {
        position: absolute;
        top: 0;
        width: inherit;
        line-height: 30px; /* header-bg height값 */
        border-left:1px solid; border-color:#3b3f2c #c4c4c4;
    }
    table.fixed-table th:first-child .th-text {
        border-left: none;
    }
    table.fixed-table tbody tr:last-child td{border-bottom:1px solid #3b3f2c;} 
    table.fixed-table tbody tr:nth-child(even) {background: #f6f6f6;}
</style>
</head>
<body style="padding:50px">
		<h2 style="margin-bottom:20px;">html 테이블(Table) 헤더 고정 본문(tbody) 스크롤 예제</h2>	
    <div class="fixed-table-container" style="width:600px;height:100px;">
        <div class="fixed-table-header-bg"></div>
        <div class="fixed-table-wrapper">
					<table id="tbl_employee" class="fixed-table">
 								<thead>
									<tr>
										<th style="width:5%"><div class="th-text"><input type="checkbox" id="app_check_all" /></div></th>
										<th style="width:15%"><div class="th-text">사원번호</div></th>
										<th style="width:10%"><div class="th-text">성명</div></th>
										<th style="width:10%"><div class="th-text">직책</div></th>
										<th style="width:45%"><div class="th-text">부서</div></th>
										<th style="width:15%"><div class="th-text">재직구분</div></th>
									</tr>
								</thead>
								<tbody>
                   <tr>
	                   	<td><input type="checkbox" name="emp_code"></td>
	                   	<td>10000</td>	
	                   	<td>홍길동</td>
	                   	<td>사원</td>
	                   	<td>인사팀</td>
	                   	<td>재직</td>
                   </tr>
                   <tr>
	                   	<td><input type="checkbox" name="emp_code"></td>
	                   	<td>10001</td>	
	                   	<td>성춘향</td>
	                   	<td>사원</td>
	                   	<td>인사팀</td>
	                   	<td>재직</td>
                   </tr>
                   <tr>
	                   	<td><input type="checkbox" name="emp_code"></td>
	                   	<td>10002</td>	
	                   	<td>변사또</td>
	                   	<td>사원</td>
	                   	<td>재무팀</td>
	                   	<td>재직</td>
                   </tr>
                   <tr>
	                   	<td><input type="checkbox" name="emp_code"></td>
	                   	<td>10003</td>	
	                   	<td>이영자</td>
	                   	<td>사원</td>
	                   	<td>인사팀</td>
	                   	<td>퇴직</td>
                   </tr>
                   <tr>
	                   	<td><input type="checkbox" name="emp_code"></td>
	                   	<td>10004</td>	
	                   	<td>이삼자</td>
	                   	<td>사원</td>
	                   	<td>인사팀</td>
	                   	<td>재직</td>
                   </tr>
                   <tr>
	                   	<td><input type="checkbox" name="emp_code"></td>
	                   	<td>10005</td>	
	                   	<td>김필모</td>
	                   	<td>사원</td>
	                   	<td>인사팀</td>
	                   	<td>재직</td>
                   </tr>                                                                                               
                </tbody>
            </table>
        </div>
    </div>
</body>
</html>

댓글목록

등록된 댓글이 없습니다.

게시물 검색
Copyright © 서방님.kr All rights reserved.
PC 버전으로 보기