table - overflow 속성을 사용한 테이블 스크롤 효과

overflow 속성을 사용한 테이블 스크롤 효과는 많은 부분에 응요할 수가 있습니다. 아래와 같이 overflow 속성값을 auto로 지정한 DIV element 사이에 테이블을 입력하면 스크롤이 생깁니다.

<table width="300" border="1"> <tr> <td width="150">이름</td> <td width="150">성적</td> </tr> </table> <div style="width: 320px; height: 100px; overflow: auto"> <table width="300px" border="1"> <tr> <td width="150">홍길동</td> <td width="150">99</td> </tr> <tr> <td width="150">홍길순</td> <td width="150">95</td> </tr> <tr> <td width="150">김개똥</td> <td width="150">82</td> </tr> <tr> <td width="150">김철수</td> <td width="150">80</td> </tr> <tr> <td width="150">김영희</td> <td width="150">78</td> </tr> <tr> <td width="150">이철수</td> <td width="150">75</td> </tr> <tr> <td width="150">이영희</td> <td width="150">60</td> </tr> </table> </div>

이와 같은 방식의 테이블이 잘 쓰이지는 않지만 이런식으로도 응용이 가능하다는 걸 보여주기 위함입니다.

이름 성적 홍길동 99 홍길순 95 김개똥 82 김철수 80 김영희 78 이철수 75 이영희 60

※출처 : http://www.homejjang.com/