웹 개발을 하다 보면 보통 처음엔 퍼블리싱을 받지만

어쩔 수 없이 추가 개발이 들어와 기존에 있던 ui를 확장하여 새로운 ui 작업을 하기도 한다.

ui 고칠 일이 많거나 새로운 아이콘이 필요하다거나 잘 모르겠으면

퍼블리셔 분에게 요청하겠지만 간단한 것은 빠르게 내 선에서 해결하는 편이다.

이것도 그런 일 중 하나로, 관리자 페이지 특정 목록에서 엑셀 일괄 등록 기능이 새로 추가되는 일이었다.

엑셀 파일로 데이터를 업로드하여 진짜 테이블에 넣기 전에 임시 테이블에 넣어 확인하는 ui가 있었는데

엑셀로 등록하다 보니 나중에 행의 개수가 많아져 header가 고정되는 편이 좋을 것 같아 그렇게 작업했다.

처음엔 그냥 y축만 움직여서 작업하면 되어서 css로 충분히 작업이 가능하였으나

x축이 필요한 테이블이 생기게 되어 jQuery를 이용하는 아래 결과물이 나오게 되었다.

<style>
#userTbl {
  	width: 600px;
	height: 200px;
  	overflow-y: auto;
}
  	
#userTblHead {
  	width: 600px;
  	overflow-x: hidden;
}
  	
#userTbl table {
  	border-top: 0px;
}
  	
#userTblHead table {
  	overflow: hidden;
  	border-top: 2px solid #aaa;
  	border-bottom: 1px solid #aaa;
}
  	
.tblWrap table {
  	width: 100%;
  	border-spacing: 0;
  	border-width: 1px 0;
  	border-collapse: collapse;
  	table-layout: fixed;
}

.tblWrap table thead th {
	background: #eee;
}

.tblWrap table td {
	text-align: center;
	border-bottom: 1px solid #aaa;
}

.tblWrap table td.left {
	text-align: left;
	padding-left: 10px;
}

.tblWrap table th:not(:last-child), table td:not(:last-child) {
    border-right: solid 1px #aaa;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
var sl = 0;
$(function(){
	$.fn.hasYScrollBar = function() {
	    return (this.prop("scrollHeight") == 0 && this.prop("clientHeight") == 0)
	            || (this.prop("scrollHeight") > this.prop("clientHeight"));
	};

	$.fn.hasXScrollBar = function() {
	    return (this.prop("scrollWidth") == 0 && this.prop("clientWidth") == 0)
	            || (this.prop("scrollWidth") > this.prop("clientWidth"));
	};
	
	$("#userTbl").scroll(function(event){
		// data 테이블 x축 스크롤을 움직일 때header 테이블 x축 스크롤을 똑같이 움직인다
		if (sl != $("#userTbl").scrollLeft()) {
			sl = $("#userTbl").scrollLeft();
			$("#userTblHead").scrollLeft(sl);
		}
	});
	
	if ($("#userTbl").hasYScrollBar()) {
		//y축 스크롤이 있으면 스크롤 넓이인 17px만큼 header 마지막 열 크기를 늘린다
		$("#userTblHead colgroup col:last-child").width($("#userTbl colgroup col:last-child").width() + 17);
	} else {
		$("#userTblHead colgroup col:last-child").width($("#userTbl colgroup col:last-child").width());
	}
});
</script> 
<div class="tblWrap">
	<div id="userTblHead">
		<table>
			<!-- col의 width를 %가 아닌 px 단위로 정확히 지정해야 두 테이블이 하나의 테이블 처럼 보인다 -->
			<colgroup>
				<col style="width:45px">
				<col style="width:100px">
				<col style="width:100px">
				<col style="width:100px">
				<col style="width:100px">
				<col style="width:150px">
				<col style="width:200px">
				<col style="width:130px">
				<col style="width:130px">
			</colgroup>
			<thead>
				<tr>
					<th>No</th>
					<th>이름</th>
					<th>부서</th>
					<th>직급</th>
					<th>아이디</th>
					<th>전화번호</th>
					<th>이메일</th>
					<th>생년월일</th>
					<th>입사일</th>
				</tr>
			</thead>
		</table>
	</div>
	<div id="userTbl">
		<table>
			<colgroup>
				<col style="width:45px">
				<col style="width:100px">
				<col style="width:100px">
				<col style="width:100px">
				<col style="width:100px">
				<col style="width:150px">
				<col style="width:200px">
				<col style="width:130px">
				<col style="width:130px">
			</colgroup>
			<tbody>
				
				<tr>
					<td>1</td>
					<td>홍길동</td>
					<td>영업</td>
					<td>사원</td>
					<td>hong</td>
					<td>010-1000-1000</td>
					<td class="left">hong@company.co.kr</td>
					<td>1994-09-15</td>
					<td>2017-05-08</td>
				</tr>
				<tr>
					<td>2</td>
					<td>홍길동</td>
					<td>영업</td>
					<td>사원</td>
					<td>hong</td>
					<td>010-1000-1000</td>
					<td class="left">hong@company.co.kr</td>
					<td>1994-09-15</td>
					<td>2017-05-08</td>
				</tr>
				<tr>
					<td>3</td>
					<td>홍길동</td>
					<td>영업</td>
					<td>사원</td>
					<td>hong</td>
					<td>010-1000-1000</td>
					<td class="left">hong@company.co.kr</td>
					<td>1994-09-15</td>
					<td>2017-05-08</td>
				</tr>
				<tr>
					<td>4</td>
					<td>홍길동</td>
					<td>영업</td>
					<td>사원</td>
					<td>hong</td>
					<td>010-1000-1000</td>
					<td class="left">hong@company.co.kr</td>
					<td>1994-09-15</td>
					<td>2017-05-08</td>
				</tr>
				<tr>
					<td>5</td>
					<td>홍길동</td>
					<td>영업</td>
					<td>사원</td>
					<td>hong</td>
					<td>010-1000-1000</td>
					<td class="left">hong@company.co.kr</td>
					<td>1994-09-15</td>
					<td>2017-05-08</td>
				</tr>
				<tr>
					<td>6</td>
					<td>홍길동</td>
					<td>영업</td>
					<td>사원</td>
					<td>hong</td>
					<td>010-1000-1000</td>
					<td class="left">hong@company.co.kr</td>
					<td>1994-09-15</td>
					<td>2017-05-08</td>
				</tr>
				<tr>
					<td>7</td>
					<td>홍길동</td>
					<td>영업</td>
					<td>사원</td>
					<td>hong</td>
					<td>010-1000-1000</td>
					<td class="left">hong@company.co.kr</td>
					<td>1994-09-15</td>
					<td>2017-05-08</td>
				</tr>
				<tr>
					<td>8</td>
					<td>홍길동</td>
					<td>영업</td>
					<td>사원</td>
					<td>hong</td>
					<td>010-1000-1000</td>
					<td class="left">hong@company.co.kr</td>
					<td>1994-09-15</td>
					<td>2017-05-08</td>
				</tr>
				<tr>
					<td>9</td>
					<td>홍길동</td>
					<td>영업</td>
					<td>사원</td>
					<td>hong</td>
					<td>010-1000-1000</td>
					<td class="left">hong@company.co.kr</td>
					<td>1994-09-15</td>
					<td>2017-05-08</td>
				</tr>
			</tbody>
		</table>
	</div>
</div>

- y축 있을 때

- y축 없을 때

아시다시피 html table은 header가 기본적으로 고정되지 않지만 위와 같이 편법을 쓰면 가능하다.

table header를 고정시키는 편법으로는 여러 가지 방법이 있으나

위 방법처럼 접근성엔 좋지 않은 header 테이블과 data 테이블을 나눈 이유는

내가 적용하려는 웹이 관리자 페이지이므로 접근성이 크게 상관없고,

저 방법으로 하면 ie와 Chrome 둘 다 열을 나누는 선이 있어도 y축이 있든 없든 예쁘게 보이기 때문이다.