HTML 테이블 tbody 스크롤 적용, head 고정3
페이지 정보
작성자 서방님 댓글 0건 조회 133회 작성일 19-05-09 09:29본문
<!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>
관련링크 (출처)
댓글목록
등록된 댓글이 없습니다.
