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

블로그&홈페이지 팁 2009/06/11 15:55
어찌보면 웹프로그램할 때 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>

 

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

 

 


 

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

 

<추천>해 주시면 더욱 많은 분들이 글을 볼 수 있습니다.
Posted by 명섭이
TAG , , , , ,
트랙백 2개, 댓글 10개가 달렸습니다

트랙백 주소 :: http://blog.bsmind.co.kr/trackback/71 관련글 쓰기

  1. Subject: 하츠의 생각

    Tracked from itry's me2DAY 2009/06/11 16:09  삭제

    [html 팁] 테이블에 스크롤바 만들기 어찌보면 웹프로그램할 때 Language보다 html이나 스타일쉬트 때문에 시간이 오래걸릴 때가 많다.. 쉽다고 기억을 하지 않고 그때 그때 찾으면서 하니 이보다 비효율적일 수가… 내용이 많은 경우 iframe을 사용하지..

  2. Subject: THEAD안에 TD, 제목일까?

    Tracked from 웹 뒤에 숨은 Web 2009/06/19 14:52  삭제

    데이터테이블은 TABLE 요소 안에 THEAD, TFOOT, TBODY, TR, TH, TD 등의 자식 요소들을 배치함으로써 만들어진다. 더불어 CAPTION 요소를 통해 데이터테이블의 제목을 달아 주거나, summary 속성을을 통해 데이터테이블의 내용을 요약해서 적어줄 수 있다. 보통의 경우 다음과 같이 마크업할 수 있다. (편의상 네이버 스포츠 축구 섹션에서 2010 남아공 월드컵 아시아 지역 최종 예선 결과표를 인용합니다.) 2010 남아공..

댓글을 달아 주세요

  1. BlogIcon 리느린트 2009/06/11 22:18  댓글주소  수정/삭제  댓글쓰기

    overflow-x 와 overflow-y 는 인터넷 익스플로러 전용속성이에요^ ^

    • BlogIcon 명섭이 2009/06/11 23:05  댓글주소  수정/삭제

      아! 그렇군요.
      많은 곳에서 사용하길레 별 생각없이 사용을 하고 있었네요^^;;
      감사합니다~~

    • 리느린트 2009/06/12 11:04  댓글주소  수정/삭제

      별군이 알려줬는데, 현재 모든 브라우저에서 동작한다네요 ㅋ
      css3에서 채택되어 잘 적용되는 속성인가봐요.
      그냥 쓰셔도 될거같아요 죄송해요@ _@

    • BlogIcon 명섭이 2009/06/13 19:47  댓글주소  수정/삭제

      그렇군요...
      글 내용에 추가했다가 다시 지웠습니다 ^^;;
      감사합니다.~

  2. BlogIcon 별군 2009/06/12 11:06  댓글주소  수정/삭제  댓글쓰기

    관련 내용 링크 주소 알려드릴게요.
    ie8에서는 -ms- 를 붙여야 속성 적용이 됩니다. :D
    http://msdn.microsoft.com/en-us/library/ms534313(VS.85).aspx

  3. BlogIcon 윤초딩 2009/06/18 17:05  댓글주소  수정/삭제  댓글쓰기

    구글이벤트 3등에 당첨되셨어요~~
    축하드려요..
    명섭이님 덕분에 저는 좀더 좋은걸 받게되어서
    감사 인사겸 들렸습니다..
    혹시라도 오해 없으시길 그냥 축하드리러 왔어요~~

  4. BlogIcon 짙푸른 2010/08/14 17:52  댓글주소  수정/삭제  댓글쓰기

    감사합니다. 많은 도움이 되었습니다.

페이의지 맨위로