간단하게 테이블 tbody 스크롤 적용하기

테이블을 그리다보면 가끔 이런 부분에섯 조금 막히곤 한다. 바로 테이블 스크롤이다. 테이블에 Height 옵션을 설정하고 overflow를 스크롤로 하면 될 것 같은데 그게 잘 안된다. 그렇게 해서 인터넷을 찾아보면 CSS로만 하기라든가 스크립트로 하기 등 다소 복잡한 방법들이 많길래 그냥 본인이 쓰는 방법을 한번 소개해본다.

No	Id	Name

1	Do	도봉순
2	Gae	커밍순
3	Girl	여자친구
4	Uk	육성제
5	Mo	무스비
1	Do	도봉순
2	Gae	커밍순
3	Girl	여자친구
4	Uk	육성제
5	Mo	무스비
1	Do	도봉순
2	Gae	커밍순
3	Girl	여자친구
4	Uk	육성제
5	Mo	무스비

이 글을 보는 대부분의 사람들이 이런 테이블을 만들기 위해 검색을 할 것이다. 모양은 조금 다르지만 Head 부분은 고정되고 그 아래 body 부분만 스크롤 되는 방법! 아주 간단하다. 테이블을 두개 만들어서 하나에는 head만 넣고 다른 하나에는 body만 넣으면 된다. 동일한 colgroup을 주고 넓이만 맞춰주면 된다.

<table>
	<colgroup>
		<col width="20%">
		<col width="40%">
		<col width="40%">
	</colgroup>
	<thead>
		<tr>
			<td>No</td>
			<td>Id</td>
			<td>Name</td>
		</tr>
	</thead>
</table>
<div>
<table>
	<colgroup>
		<col width="20%">
		<col width="40%">
		<col width="40%">
	</colgroup>
	<tbody>
		<tr><td>1</td><td>Do</td><td>도봉순</td></tr>
		<tr><td>2</td><td>Gae</td><td>커밍순</td></tr>
		<tr><td>3</td><td>Girl</td><td>여자친구</td></tr>
		<tr><td>4</td><td>Uk</td><td>육성제</td></tr>
		<tr><td>5</td><td>Mo</td><td>무스비</td></tr>
		<tr><td>1</td><td>Do</td><td>도봉순</td></tr>
		<tr><td>2</td><td>Gae</td><td>커밍순</td></tr>
		<tr><td>3</td><td>Girl</td><td>여자친구</td></tr>
		<tr><td>4</td><td>Uk</td><td>육성제</td></tr>
		<tr><td>5</td><td>Mo</td><td>무스비</td></tr>
		<tr><td>1</td><td>Do</td><td>도봉순</td></tr>
		<tr><td>2</td><td>Gae</td><td>커밍순</td></tr>
		<tr><td>3</td><td>Girl</td><td>여자친구</td></tr>
		<tr><td>4</td><td>Uk</td><td>육성제</td></tr>
		<tr><td>5</td><td>Mo</td><td>무스비</td></tr>
	</tbody>
</table>
</div>
<style>
/* 단순 테이블 선, 디자인 */
table{border-coollapse: collapse; text-align: center;}
table th, table td{border: 1px solid gray; }
/* 중요 */
table{width: 500px;  }
div{max-height: 136px; overflow-y: scroll; width: 517px;}
</style>

※ 참고

No	Id	Name

1	Do	도봉순
2	Gae	커밍순
3	Girl	여자친구
4	Uk	육성제
5	Mo	무스비
1	Do	도봉순
2	Gae	커밍순
3	Girl	여자친구
4	Uk	육성제
5	Mo	무스비
1	Do	도봉순
2	Gae	커밍순
3	Girl	여자친구
4	Uk	육성제
5	Mo	무스비

코드 끝에 보면 div의 width와 table의 width가 다른 것을 볼 수 있는데 이런 이유는 위와 같다. div의 공간을 넉넉하게 주지 않으면 스크롤이 이쁘게 자리를 잡지 못한다. 그렇기 때문에 table + scroll을 위해 div 공간을 조금 더 잡아두는 것이다.