[HTML] 테이블에 스크롤 추가하기

일반적으로 테이블은 다음과 같은 형태로 만듭니다.

 

<table width="100%" border="0" cellspacing="0" cellpadding="0">

<tr>

<td></td>

<td></td>

...

<td></td>

</tr>

</table>

 

좀 더 보기 좋게 짠다면 thead 나 tbody 등의 태그를 사용하기도 하고, colgroup 태그를 활용할 수 있습니다. 테이블 태그에 대한 내용은 이번 포스팅 주제가 아니므로 접어두고,

 

위의 테이블은 웹 브라우저의 너비(또는 테이블이 다른 table 또는 div 영역에 속한 경우, 해당 영역의 최대치)에 맞추어 너비가 가변적 변하며, 화면에 최대치(100%)로 표시됩니다.

 

그런데 위의 <td> 태그 내에 표시해야할 내용이 많거나 <td> 사이즈가 고정되어 화면을 100% 사용했음에도 불구하고 너비를 벗어나는 경우가 있을 수 있습니다.

 

이러한 경우, 즉 테이블 내용이 테이블의 영역을 벗어나는 경우, 스크롤을 넣으면 한 결 더 보기가 좋지 않을까요?

테이블에 스크롤을 넣는 방법은 div태그를 이용하는 것입니다.

 

table을 div로 감싸고, div를 원하는 사이즈로 고정한 뒤, table 내부의 내용이 div 사이즈를 벗어나는 경우, 스크롤을 생성시키는 방법입니다. (즉, 정확하게 말하면 테이블 자체에 스크롤이 생기는 것이 아니라 div 태그에 생성되는 것이지요.

 

<div style="width:100%; height:200px; overflow:auto">

<table width="100%" border="0" cellspacing="0" cellpadding="0">

<tr>

<td></td>

<td></td>

...

<td></td>

</tr>

</table>

</div>

 

 

 

실제 코드도 위와 같이 간단합니다.

div는 너비를 100%로, 높이를 200픽셀로 잡았습니다. div 내의 테이블에 내용이 위의 div 공간을 벗어나게 되면 스크롤이 생기게 됩니다. 너비는 자신이 가질 수 있는 영역 최대치(100%)를 초과한 경우, 높이는 200픽셀을 초과한 경우, 스크롤이 나타납니다.

 

이는 위의 overflow 라는 스타일 속성 때문인데요. overflow 는 해당 태그의 범위를 벗어나는 객체를 표현해야 하는 경우, 어떻게 처리할지에 대한 설정을 할 수 있는 속성이며, 다음과 같은 옵션이 있습니다.

 

overflow:auto : 영역 범위를 벗어나지 않으면 그대로 표시하고, 벗어나면 스크롤바를 표시합니다.

overflow:scroll : 영역 범위의 초과 여부 상관없이 항상 테이블에 스크롤을 표시합니다.

overflow:hidden : 영역을 초과하더라도 스크롤을 표시하지 않습니다. 

 

가로 또는 세로 스크롤을 별도로 지정합니다.

overflow-x:scroll : 가로(너비) 스크롤만 표시합니다.

overflow-y:scroll : 세로(높이) 스크롤만 표시합니다.

overflow-x:hidden : 가로(너비) 스크롤만 표시하지 않습니다.

overflow-y:hidden : 세로(높이) 스크롤만 표시하지 않습니다.

 

 

눈치 채셨을 수도 있겠지만, 이번 포스팅은 테이블 스크롤에 관한 것이지만, 사실 스크롤이 필요한 모든 태그 개체에 적용할 수 있습니다.