[HTML/CSS] cell sticky table 생성

See the Pen Table with Sticky Header and Sticky First Column by Chris Coyier (@chriscoyier) on CodePen.

위와 같이 header나 일부 column이 고정된 테이블을 만들고 싶을 때,

CSS를 이용해야한다.

<div>
	<table>
    	<thead>
        	<tr>
            	<th></th>
                <th></th>
            </tr>
        </thead>
        <tbody>
        	<tr>
            	<td></td>
                <td></td>
            </tr>
            <tr>
            	<td></td>
                <td></td>
            </tr>
            <tr>
            	<td></td>
                <td></td>
            </tr>
        </tbody>
    </table>
</div>

 

header 고정

div {
    width: 100%;
    height: 300px;
    overflow: auto;
    table {
    	border-collapse: separate;
        thead th {
            position: sticky;
            top: 0;
        }
    }
}

1. overflow 속성을 통해 설정해놓은 300px height를 넘길 때 스크롤이 생기도록 한다.
   ※ overflow : 내부 컨텐츠가 주어진 공간을 넘어갈 때 어떻게 할지 결정
   ※ overflow auto : 주어진 공간을 넘어갔을 때만 스크롤바 생성
2. position sticky 설정을 통해 상단에(top: 0) header를 고정시킨다.
   ※ position sticky : 설정한 위치(top, bottom, left, right)에 도달하면 고정된다.
3. 가끔, 스크롤을 내릴 때 고정된 header 위에 살짝씩 데이터가 보이는 경우가 있다.
   이 때는 border-collapse 설정을 통해 안 보이도록 만들어 준다. 
   ※ border-collapse : 테이블이나 셀의 테두리선 표시방법 설정 (테두리가 겹칠 때 한 줄? 두줄?)
   ※ border-collapse separate : 서로 이웃하는 테이블이나 셀의 테두리선을 분리시켜 표현 (=한 줄)

 

column 고정 (1개일 경우)

div {
    width: 100%;
    height: 300px;
    overflow: auto;
    table {
    	border-collapse: separate;
        thead th:first-child,
        tr td:first-child {
            position: sticky;
            left: 0;
            background-color: white
        }
    }
}

1. position sticky 설정을 통해 좌측이(left: 0) header를 고정시킨다.
2. background-color를 통해서 좌우 스크롤할 때 고정된 column과 그 외 column이 겹쳐보이지 않도록 한다. 

 

column 고정 (2개 이상일 경우)

scss

div {
    width: 100%;
    height: 300px;
    overflow: auto;
    table {
    	border-collapse: separate;

        @for $i from 1 through (고정할 column 개수) {
            thead th:nth-child(#{$i}),
            tr td:nth-child(#{$i}) {
                position: sticky;
                left: 100px * ($i - 1);
                background-color: white;
            }
        }
    }
}

1. 고정될 column별로 고정되어야하는 위치가 달라서 column별로 left위치를 설정해준다. (100px는 cell 너비)

 

header와 column 여러개 고정할 경우

1. z-index로 고정되는 column의 header는 고정되는 column cell보다 높은 값을 주면 된다.