CSS로 헤더가 고정된 스크롤 테이블 만들기

테이블 태그를 활용하는 트릭으로 작은 영역을 차지하는 행 스크롤이 가능한 테이블을 만들 수 있는 팁입니다.

테이블 태그 "<table>"은 헤더 영역과 바디 영역 2개로 나누어집니다.

실제로 태그를 직접 입력해서 테이블을 생성할 때 잘 사용하지는 않지만 헤더 영역은 "<thead>" 태그로, 바디 영역은 "<tbody>" 태그로 구분합니다.

그리고 "<tbody>" 태그는 테이블 안에 정의되지 않은 경우 웹 브라우저가  자동으로 생성해주기도 합니다.

"<thead>, "<tbody>" 태그는 영역을 구분하는 용도의 태그로 영역 안의 행 태그(들)(<tr>)을 감싸는 부모 태그의 역할을 합니다. 동시에 블록 속성을 부여해 블록 태그의 기능도 할 수 때문에 크기 속성과 다른 여러 가지 속성 들을 태그에 적용할 수 있습니다.

테이블 내용이 긴 경우 웹 페이지 안에서 짧게 압축해서 표현할 필요가 있는데 이럴 때 "<tbody>" 태그에 블록 속성을 부여해, 헤더 영역이 고정되어 있고, 내용 행들을 좁은 영역에서 스크롤 해서 볼 수 있는 테이블 형태를 만들 수 있습니다.

완성된 소스는 다음 링크를 다운로드 해서 확인할 수 있습니다.

scrolltable.zip0.00MB

CSS 를 하나씩 확인하면서 만들어 보도록 하겠습니다.

1. 기본 테이블 구조 디자인 입히기

먼저 디자인을 입힌 기본 테이블을 만듭니다. 헤더 영역에 색상을 입히고, 홀수 내용 행에 배경색을 입혀서 구분되도록 만든 간단한 테이블입니다.

.scrolltable{
    table-layout: fixed;
    border-collapse: collapse;
    border: 1px solid #888;
}
.scrolltable thead {
    background: #a88;
    color:#fff;
}
/* 행 장식 */
.scrolltable th, .scrolltable td {
  padding: 10px;
  text-align: left;
  width: 100px;
  text-align: center;
  font-size: 0.875em;
}
.scrolltable tbody tr:nth-child(2n+1){
    background-color: #f0f0f0;
}

2. 헤더를 고정하고 스크롤 UI 생성

"<thead>"와 "<tbody>" 태그에 "display: block;" 속성을 추가해 블록 태그의 속성을 가지도록 합니다.

어느 한쪽에만 추가하면 레이아웃이 깨지므로 반드시 두 태그에 모두 지정해야 합니다.

이제 두 태그가 블록 특성을 가지게 되었으므로 "<tbody>" 태그의 높이값을 제한합니다.

.scrolltable thead {
    display:block;
    background: #a88;
    color:#fff;
}
.scrolltable tbody{
    display:block;
    height:190px;
}

여기까지 만들면 다음과 같이 보이게 됩니다. 블록 특성을 가지고 "<tbody>" 태그의 높이값을 제한해 높이는 줄어들었지만, 블록 바깥으로 내부 내용이 모두 보이게 됩니다.

블록 태그는 넘치는 내용들을 제어할 수 있는 속성이 있습니다.

"<tbody>" 태그에 "overflow: auto;" 속성을 추가해 자동으로 스크롤 바가 표시되도록 하면 넘치는 내용들이 사라지게 됩니다.

.scrolltable tbody{
    display:block;
    overflow:auto;
    height:190px;
}