GitHub에서 보기

테이블 고정 헤더

Bootstrap Table의 고정 헤더 확장 기능으로, 스크롤 시 테이블 헤더를 뷰포트 상단에 고정합니다.

이 페이지에서

이 확장 기능은 테이블에 고정 헤더 기능을 제공하며, 페이지를 스크롤할 때 테이블 헤더가 뷰포트 상단에 고정되어 사용자가 대량의 데이터를 볼 때 항상 열 제목을 볼 수 있도록 합니다.

사용법

<link rel="stylesheet" href="extensions/sticky-header/bootstrap-table-sticky-header.css">
<script src="extensions/sticky-header/bootstrap-table-sticky-header.js"></script>

예제

Sticky Header

옵션

  • 속성: data-sticky-header

  • 유형: Boolean

  • 세부 정보:

    고정 헤더 기능을 활성화할지 여부를 제어합니다. true로 설정하면 테이블 헤더가 페이지 스크롤 시 뷰포트 상단에 고정됩니다.

  • 기본값: false

stickyHeaderOffsetLeft

  • 속성: data-sticky-header-offset-left

  • 유형: Number

  • 세부 정보:

    고정 컨테이너의 왼쪽 오프셋을 설정합니다(단위: 픽셀). 예를 들어 페이지 body의 왼쪽 안쪽 여백이 60px인 경우 이 값을 60으로 설정하여 고정 헤더를 페이지 콘텐츠와 정렬할 수 있습니다.

  • 기본값: 0

stickyHeaderOffsetRight

  • 속성: data-sticky-header-offset-right

  • 유형: Number

  • 세부 정보:

    고정 컨테이너의 오른쪽 오프셋을 설정합니다(단위: 픽셀). 예를 들어 페이지 body의 오른쪽 안쪽 여백이 60px인 경우 이 값을 60으로 설정하여 고정 헤더를 페이지 콘텐츠와 정렬할 수 있습니다.

  • 기본값: 0

stickyHeaderOffsetY

  • 속성: data-sticky-header-offset-y

  • 유형: Number

  • 세부 정보:

    고정 헤더가 창 상단에서 떨어진 거리를 설정합니다(단위: 픽셀). 예를 들어 높이가 60px인 고정 탐색 모음이 있는 경우 이 값을 60으로 설정하여 고정 헤더가 탐색 모음에 가려지지 않도록 할 수 있습니다.

  • 기본값: 0