순수 CSS 로만 작성하는 스크롤 테이블

Category
HTML/CSS/JS, 개발 노트
Posted
2013-11-13 14:05
세월호 참사 1주기 결코 잊지 않겠습니다.

Prologue

간혹 table 을 마크업 할 때, 기획 상 혹은 필요상 엑셀처럼 틀고정을 하여 활용도를 높여주어야 할 필요가 있을 때가 있다.
이 때문에 여기저기 이 문제를 해결한 솔루션들을 찾아봤지만 딱히 마땅한 솔루션들이 없었다.
대다수의 솔루션들은 javascript를 이용하여 thead에 해당하는 부분을 clone시켜 추가 table을 만들어서 처리하는 방식을 택하고 있었는데, 이는 접근성에서 문제가 되는 부분이라 판단하여 순수하게 CSS로만 처리를 할 수 있는 방법은 없을지를 고민해 봤다.
몇 군데 구글링을 통해 검색한 결과 해외 사이트에서 Pure CSS Scrollable Table with Fixed Header 이라 해서 나와 있는데 크로스브라우징 문제가 있어서 ;;
에라 모르겠다 직접 만들어보자 하여 이런 저런 테스트 끝에 프로토타입 격으로 만들어봤다.
프로토타입격으로 만들어 둔 것이라 아직은 이것저것 손을 봐야 할 곳이 많다.

== 추가 내용 ==
이 코드는 접근성을 충분히 제공하지 못하는 것으로 확인 됨.
FireFox의 accessible tree를 확인 했을 때, thead 내용이 position : absolute가 되면서 테이블 구조가 아닌, 일반 텍스트 구조로 변경됨.
차후 접근성을 제공 할 수 있는 방법에 대해 고민하여 개선할 예정.

Source Code

Markup
<div class="wrap">
	<div>
		<table>
			<thead>
				<tr><th>1</th><th>2</th><th>3</th><th>4</th></tr>
			</thead>
			<tbody>
				<tr><td>td-1-1</td><td>td-1-2</td><td>td-1-3</td><td>td-1-4</td></tr>
				<tr><td>td-1</td><td>td-2</td><td>td-3</td><td>td-4</td></tr>
				<tr><td>td-1</td><td>td-2</td><td>td-3</td><td>td-4</td></tr>
				<tr><td>td-1</td><td>td-2</td><td>td-3</td><td>td-4</td></tr>
				<tr><td>td-1</td><td>td-2</td><td>td-3</td><td>td-4</td></tr>
				<tr><td>td-1</td><td>td-2</td><td>td-3</td><td>td-4</td></tr>
				<tr><td>td-1</td><td>td-2</td><td>td-3</td><td>td-4</td></tr>
				<tr><td>td-1</td><td>td-2</td><td>td-3</td><td>td-4</td></tr>
				<tr><td>td-1</td><td>td-2</td><td>td-3</td><td>td-4</td></tr>
				<tr><td>td-1</td><td>td-2</td><td>td-3</td><td>td-4</td></tr>
				<tr><td>td-1</td><td>td-2</td><td>td-3</td><td>td-4</td></tr>
				<tr><td>td-1</td><td>td-2</td><td>td-3</td><td>td-4</td></tr>
				<tr><td>td-1</td><td>td-2</td><td>td-3</td><td>td-4</td></tr>
				<tr><td>td-1</td><td>td-2</td><td>td-3</td><td>td-4</td></tr>
				<tr><td>td-1</td><td>td-2</td><td>td-3</td><td>td-4</td></tr>
			</tbody>
		</table>
	</div>
</div>

CSS
div.wrap{position: relative;padding-top:30px;width:850px;height: 300px;overflow: hidden;}
div.wrap > div {height: 300px;overflow: auto;}
table{width: 800px}
thead tr{position: absolute;top: 0;display: block;background-color: #DEDEDE;width: 800px;height: 30px;}
thead th{width: 200px}
tbody{display: block;height: 300px;}
tbody tr{height: auto;}
tbody td{width: 200px;text-align: center;}

Result

위 코드를 실행해보면 다음과 같은 결과를 얻을 수 있다.

See the Pen okvFs by mulder21c (@mulder21c) on CodePen.

Authored By 멀더끙