[CSS] Table tbody에 스크롤 적용하기

1. 개요

 

웹페이지를 개발하다보면 table을 그리면서 스크롤을 구현할 때가 있다. 다음 예제를 보며 따라해보자.

 

See the Pen table-tbody3 by Bumday (@bumdayy) on CodePen.

 

한 테이블이 있고, 행의 수가 5개이다.

가령 이 테이블이 들어갈 공간이 매우 협소하여 150px높이 내에 이 테이블을 그려줘야 한다고 가정해보자.

그렇다면 열머리의 높이는 고정이나, 테이블의 행 수에 따라 tbody는 늘어날 것이기 때문에 높이값을 제한해줘야 한다.

 

 

 

2. 스크롤 적용

 

다음과 같이 table의 tbody의 max-height값을 지정해 주고, overflow-y를 scroll로 지정해주어 넘는 높이는 스크롤로 볼수있게 해준다. 

table tbody {
  display: block;
  max-height: 100px;
  overflow-y: scroll;
}

여기서 display: block;을 지정해주는 이유는, table의 기본 display는 "table"이기 때문에, max-height 설정이 적용되지 않아서 block으로 지정해주는 것이다.

 

 

근데.. 여기까지하면 아래와 같이 tbody가 display: block이 되면서 컬럼의 너비가 깨지게 된다.

See the Pen table-tbody3 by Bumday (@bumdayy) on CodePen.

 

 

그래서 다음과 같이 table의 thead, tbody내에 있는 tr에 다음과 같이 스타일을 적용해 주어야 한다.

table thead, table tbody tr {
  display: table;
  width: 100%;
}

 

 

적용해주고 난 뒤에는 다음과 같이 원하던 대로 table의 tbody에 scroll이 적용이 잘 적용된 모습을 볼 수 있다.

See the Pen Untitled by Bumday (@bumdayy) on CodePen.