본문 바로가기
개발 이야기/HTML | CSS | JS

간단 fixedHeader 테이블 만들기

by 농개 2019. 9. 29.
반응형

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: stickyoverflow: auto 만 알면,

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

 

반응형