간단 fixedHeader 테이블 만들기

table 요소 표시할때 header를 고정 시키는 방법을 정리하려합니다.

사실 여러 UI 라이브러리들이 고정된 header로 표시하는 기능을 옵션 형태로 제공 하기도 합니다.

 

여기서는 css 속성 중 아래 속성을 이용해서 해당 기능을 구현하고자 합니다.

• overflow: auto
• position: sticky

 

먼저 아래와 같은 형태로 테이블을 만들어 봅시다.

<table>
      <thead>
        <tr>
          <th>No.</th>
          <th>Name</th>
          <th>Dept</th>
          <th>Email</th>
          <th>Expired</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>강팔자</td>
          <td>웹개발팀</td>
          <td>8888@naver.com</td>
          <td>Y</td>
        </tr>
        <tr>
          <td>2</td>
          <td>강호식</td>
          <td>기획팀</td>
          <td>2222@naver.com</td>
          <td>Y</td>
        </tr>
        (...중략)

css는 아래와 같이 해줍니다.

table {
	width: 100%;
	background-color: #f1f1f2;
}
table > thead > tr > th {
	font-weight: 400;
	color: #fff;
	background-color: blue;
	border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}
table > tbody > tr > td {
	text-align: center;
	border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

 

 

그럼 아래와 같이 화면에 표시될 겁니다.

스크롤을 내려보면

헤더가 안보이게 됩니다.

 

 

이제 헤더를 고정시키는 css코드를 넣어봅시다.

table {
	width: 100%;
	background-color: #f1f1f2;
}
table > thead > tr > th {
	font-weight: 400;
	color: #fff;
	background-color: blue;
	border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}
table > tbody > tr > td {
	text-align: center;
	border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}
.container {
	height: 500px;
	overflow: auto;
}
.fixedHeader {
	position: sticky;
	top: 0;
}

table 요소를 감싸줄 div.container에 overflow : auto를 추가해줬습니다.

그리고 div의 height를 고정시켰습니다.(500px)

table의 헤더컬럼에 position : sticky를 추가하려합니다.

또 top : 0으로 상단 고정 옵션을 줍니다.

 

HTML코드는 아래와 같습니다.

<div class='container'>
    <table>
      <thead>
        <tr>
          <th class='fixedHeader'>No.</th>
          <th class='fixedHeader'>Name</th>
          <th class='fixedHeader'>Dept</th>
          <th class='fixedHeader'>Email</th>
          <th class='fixedHeader'>Expired</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>강팔자</td>
          <td>웹개발팀</td>
          <td>8888@naver.com</td>
          <td>Y</td>
        </tr>
        (...중략)

 

아래와 같이 Y축 스크롤을 내려도 header가 고정되 표시되는 것을 확인 할 수 있습니다.

 

 

position: sticky와 overflow: auto 만 알면,

위와 같이 fixedHeader table(다른 말로 stickyHeader table)을 간단하게 구현해 볼 수 있습니다.