CSS와 JavaScript를 사용하여 수평 및 수직 스크롤 막대가 있는 고정 헤더 테이블을 구현하는 방법은 무엇입니까?

가로 스크롤 막대와 세로 스크롤 막대가 설정된 고정 헤더 테이블

이 질문은 HTML/CSS 테이블에서 헤더 및 스크롤 막대가 고정되는 문제를 해결합니다. 컨테이너 크기가 일정 수준에 도달했습니다.

기존 해결 방법

이 문제는 일반적이며 다음을 포함한 다양한 해결 방법이 제안되었습니다.

• 오버플로 자르기 또는 숨기기: 이를 달성할 수 있습니다. Overflow: Hidden 또는 text-overflow: ellipsis와 같은 CSS 속성을 사용합니다. 그러나 시각적으로 매력적이지 않거나 전체 데이터를 보존하지 못할 수 있습니다.
• JavaScript 라이브러리 사용: DataTables 및 ScrollTable과 같은 여러 JavaScript 라이브러리는 테이블에 고정 헤더 및 스크롤 막대를 생성하기 위한 솔루션을 제공합니다. . 그러나 이러한 솔루션에는 추가 코드나 종속성이 필요할 수 있습니다.

CSS 전용 솔루션

순수한 CSS는 모든 시나리오에서 고정된 헤더와 스크롤 막대를 완전히 달성할 수 없지만, 부분적인 솔루션을 제공할 수 있습니다:

/* Give the table a container with fixed height and scrolling */
#container {
  height: 400px;
  overflow-y: scroll;
}

/* Make the table header fixed */
#header {
  position: sticky;
  top: -1px;
}

CSS3 솔루션(다음에서는 지원되지 않음) IE8)

더 나은 제어와 향상된 지원을 위해 CSS3 속성을 사용할 수 있습니다.

/* Give the table a container with fixed height and scrolling */
#container {
  height: 400px;
  overflow-y: scroll;
}

/* Make the table header fixed and set its width */
#header {
  position: sticky;
  top: 0;
  width: 100%;
}

참고: 이러한 솔루션에서는 테이블 헤더와 본문이 고정된 너비를 가집니다. 너비가 고정되어 있지 않으면 추가 CSS 규칙이나 계산이 필요할 수 있습니다.

위 내용은 CSS와 JavaScript를 사용하여 수평 및 수직 스크롤 막대가 있는 고정 헤더 테이블을 구현하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!