www/CSS_tip
table - overflow 속성을 사용한 테이블 스크롤 효과
랭님
2014. 1. 1. 21:19
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/