테이블 헤더와 1열 고정된 스크롤 테이블 만들기 (position: sticky)

CSS의 position: sticky를 사용해 테이블 헤더와 첫 번째 열이 고정되어 있는 가로, 세로 스크롤 테이블을 만들어 보았다. position: sticky 사용 시 '주의할 점' 첫 번째는 부모 요소 안에서 위치 값을 고정시켜 준다는 점이다. 두 번째는 top, bottom, left, right 중에 하나는 필수적으로 꼭 넣어야 position: sticky가 작동한다는 점이다. 마지막으로 IE11 이하 버전은 지원하지 않는다는 점을 주의해야 한다. position: sticky의 브라우저별 대응 여부는 아래 링크 글을 통해 더 자세히 확인해 볼 수 있다. 

 

HTML, CSS 크로스브라우징 확인하는 사이트

 

1. HTML, CSS 소스 

[HTML]

<div class="wrap">
  <table>
    <thead>
      <tr>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
        <th>Header 4</th>
        <th>Header 5</th>
        <th>Header 6</th>
        <th>Header 7</th>
        <th>Header 8</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Cell01</td>
        <td>Cell02</td>
        <td>Cell03</td>
        <td>Cell04</td>
        <td>Cell05</td>
        <td>Cell06</td>
        <td>Cell07</td>
        <td>Cell08</td>
      </tr>
      
	  ( -- 중복 생략 -- )
      
      <tr>
        <td>Cell01</td>
        <td>Cell02</td>
        <td>Cell03</td>
        <td>Cell04</td>
        <td>Cell05</td>
        <td>Cell06</td>
        <td>Cell07</td>
        <td>Cell08</td>
      </tr>
    </tbody>
  </table>
</div>

 

[CSS]

<style type="text/css">
*{
  box-sizing: border-box
}
.wrap{
  width: 600px;
  height: 250px;
  margin: 0 auto;
  overflow-x: scroll;
}

table{
  border-collapse: separate;
  border-spacing: 0;
  width: 800px;
}

table th{
  background-color: #7579E7; 
  height: 50px; 
  color: #fff;
  border-right: 1px solid #f6f6f6; 
  border-bottom: 1px solid #f6f6f6;
  /*테이블 헤더 sticky 적용*/
  position: -webkit-sticky; 
  position: sticky; 
  top: 0;
}

table th:last-child{
  border-right: 0;
}

/*테이블 헤더 1행 1열 sticky 적용*/
table th:first-child{
  position: -webkit-sticky; 
  position: sticky; 
  left: 0;
  z-index: 1; /*가장 맨 위로 올라오도록 z-index 적용함*/
}

table td{
  background-color: #bde6fb; 
  border-right: 1px solid #f6f6f6; 
  border-bottom: 1px solid #f6f6f6;
  padding: 5px;
  text-align: center;
}

/*td 1열 sticky 적용*/
table td:first-child{
  background-color: #9AB3F5;
  position: -webkit-sticky; 
  position: sticky; 
  left: 0;
}

table td:last-child{
  border-right: 0;
}

 

2. 결과 화면 

See the Pen Untitled by H__jung (@honghongbyul) on CodePen.