테이블 1열이 고정된 가로 스크롤 테이블 만들기 (position: sticky)

데이터 양이 증가하면 스크롤 길이가 길어지면서 데이터 구별이 어려워지는데 엑셀에서는 틀 고정을 이용해서 데이터를 쉽게 파악할 수 있다.  그래서 이번에는 CSS의 position: sticky를 사용해 좌우 스크롤을 해도 테이블의 첫 번째 열은 고정되어 있는 테이블을 만들어 보려 한다. 

 

1. position: sticky ? 

• 부모 요소 안에서 위치값을 고정시켜준다.
• top, bottom, left, right 중에 하나는 필수적으로 꼭 설정해야 한다.
• IE11이하 버전은 지원하지 않는다. 

 

2. 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>
      <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>
      <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;
  margin: 0 auto;
  overflow-x: scroll;
}

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

table th{
  background-color: #EB5353; 
  height: 50px; 
  color: #fff;
  border-right: 1px solid #f6f6f6; 
  border-bottom: 1px solid #f6f6f6;
}

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

/*sticky 적용*/
table th:first-child{
  position: -webkit-sticky; 
  position: sticky; 
  left: 0;
}

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

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

table td:last-child{
  border-right: 0;
}
</style>

 

 

3. 결과 화면 

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