선택자(Selector)
Class 선택자
block-level과 inline-level
table
border-collapse
table-layout
스크롤 테이블
마우스 커서
스크롤바 색상
링크 색상
필터
인쇄
@media print
page-break-before
ime-mode
포지셔닝(Positioning)
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

Copyright © Homejjang.com All rights reserved.