[html 팁] 테이블에 스크롤바 만들기

어찌보면 웹프로그램할 때 Language보다 html이나 스타일쉬트 때문에 시간이 오래걸릴 때가 많다..

쉽다고 기억을 하지 않고 그때 그때 찾으면서 하니 이보다 비효율적일 수가...


내용이 많은 경우 iframe을 사용하지 않고 div 태그를 이용해서 스크롤바를 만들면 효과적으로 화면에 표시할 수 있으며 많이 사용한다.
 

DIV를 이용해서 테이블에 스크롤바 만들기

 

아래와 같이 테이블의 td 안에 div 넣고 div에 스타일을 적용하면 많은 내용이라도 width와 height로 지정한 영역안에 내용이 표시되고 스크롤바가 표시된다.

여기서 중요한 것이 overflow 라는 것이다.

 

  - 스크롤을 표시하지 않을 경우  : overflow:hidden

  - 항상 스크롤을 표시할 경우 : overflow:scroll

  - 자동으로 스크롤이 보이거나 안보이게 할 경우 : overflow:auto

 

<table>

  <tr>

    <td>

      <DIV style="width:100%; height:100px; overflow:scroll; padding:10px; border:3; border-style:solid; border-color:#EBEBEB">
      내용..
      내용..
      내용..
      </DIV>

    </td>

  </tr>

</table>

 

 

[div overflow:scroll 을 적용해서 스크롤이 생긴 모습]

 

 

 

가로/세로 스크롤 없애는 방법

  위의 그림을 보면 가로 스크롤은 보기에 좋지가 않다.

  스크롤바를 없애보자.

 

  - 가로 스크롤 없애는 속성 : overflow-x:hidden

  - 세로 스크롤 없애는 속성 : overflow-y:hidden

 

  위의 속성을 설정하지 않으면 기본적으로 가로나 세로 스크롤이 생긴다.

 

<table>

  <tr>

    <td>

      <DIV style="width:100%; height:100px; overflow:scroll; padding:10px; border:3; border-style:solid; border-color:#EBEBEB; overflow-x:hidden">
      내용..
      내용..
      내용..
      </DIV>

    </td>

  </tr>

</table>

 

 

[가로 스크롤이 사라진 모습]

 

 

 

간단하지만 맨날 헤딩하는 것을 정리해 봤다^^