html 테이블(Table) 헤더 고정 본문(tbody) 스크롤 예제
by 1004lucifer
HTML
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>html 테이블(Table) 헤더 고정 본문(tbody) 스크롤</title>
</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>
...CSS
/* 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,...