HTML 테이블을 스크롤 가능하게 만들기

이 기사에서는 세로로 스크롤 가능한 HTML 테이블을 만드는 방법을 소개합니다.

CSS overflow-y 속성을 scroll로 설정하여 HTML 테이블을 스크롤 가능하게 만들기

HTML 테이블이 긴 경우 전체 페이지가 아닌 테이블만 스크롤하는 기능이 필요합니다. 이 기능을 달성하기 위해 overflow-y 속성을 사용할 수 있습니다.

여기서 y는 y축을 나타냅니다. 속성은 세로 축을 따라 블록 수준 요소의 오버플로 속성을 정의합니다.

scroll 값은 블록 수준 요소를 위에서 아래로 스크롤 가능하게 만듭니다.

HTML 테이블을 세로로 스크롤 가능하게 만들기 위해 <div>로 테이블을 래핑할 수 있습니다. 그런 다음 height 속성을 사용하여 <div>의 고정 높이를 설정할 수 있습니다.

그런 다음 overflow-y 속성을 scroll로 설정할 수 있습니다. 테이블 높이가 우리가 설정한 div의 높이를 초과하면 overflow-y: scroll은 테이블을 y 방향(수직)으로 스크롤 가능하게 만듭니다.

따라서 테이블의 높이가 <div>의 높이를 초과하는지 확인해야 합니다.

예를 들어 div를 만들고 클래스 이름을 container로 지정합니다. 그 div 안에 테이블을 만들고 data라는 클래스 이름을 지정합니다.

tr, th 및 td 태그를 사용하여 테이블을 데이터로 채웁니다.

CSS에서 container 클래스를 선택하고 height 속성을 70px로, overflow-y 속성을 scroll로 설정합니다. 표 내용의 높이가 70px 이상인지 확인하십시오.

다음으로, 클래스 선택기와 테이블의 th 및 td 요소를 사용하여 테이블을 선택합니다. 그런 다음 border 속성을 1px solid black으로, border-collapse 속성을 collapse로, padding을 4px로 설정합니다. (참고: 이것은 필수 사항이 아니며 표를 더 읽기 쉽게 만들기 위한 것입니다.)

아래 예는 테이블의 높이가 div 또는 .container의 높이보다 높기 때문에 테이블이 수직으로 스크롤 가능함을 보여줍니다.

예제 코드:

<div class="container">
<table class="data">
<tr>
 <th>id</th>
 <th>Name</th>
 <th>Country</th>
</tr>
<tr>
 <td>1</td>
 <td>John Doe</td>
 <td>Nepal</td>
</tr>
<tr>
 <td>2</td>
 <td>Sam Smith</td>
 <td>India</td>
</tr>
<tr>
 <td>3</td>
 <td>Jack Daniels</td>
 <td>China</td>
</tr>
</table>
</div>

.container {
 height: 70px;
 overflow-y: scroll;
}
.data, th, td {
 border: 1px solid black;
 border-collapse: collapse;
 padding: 4px;
}

결과적으로 페이지를 로드할 때 전체 테이블이 표시되지 않습니다. 컨테이너의 높이를 70px로 설정했기 때문입니다.

그러나 수직으로 아래로 스크롤하면 나머지 테이블 내용을 볼 수 있습니다.

이런 식으로 overflow-y 속성을 사용하고 scroll로 설정하여 HTML 테이블을 세로로 스크롤 가능하게 만들 수 있습니다.