집 >웹 프론트엔드 >CSS 튜토리얼 >HTML 테이블 스크롤 막대를 표시하는 방법은 무엇입니까?

HTML 테이블 스크롤 막대를 표시하는 방법은 무엇입니까?

Linda Hamilton원래의: 2024-12-22 15:17:14145검색

How to Make an HTML Table Scrollbar Appear?

html 테이블에 스크롤 막대를 표시하는 방법

HTML로 테이블을 만들 때 일관된 테이블을 유지하려는 상황에 직면하는 것이 일반적입니다. 행 수가 표시 영역을 넘어 늘어나더라도 콘텐츠에 계속 액세스할 수 있도록 보장합니다. 이를 달성하기 위해 테이블 자체 내에 스크롤 막대를 표시해야 하는 시나리오가 발생할 수 있습니다.

이 경우 다음과 같은 CSS 스타일을 사용하려고 시도했을 수 있습니다.

tbody {
  height: 80em;
  overflow: scroll;
}

그리고 이를 HTML 구조에 통합했습니다.

<table border=1>

그러나 이러한 스타일을 구현했음에도 불구하고 스크롤바가 표시되지 않는 것을 발견했을 수 있습니다. 이 문제는 태그는

요소에는 스크롤을 수용하는 데 필요한 CSS 속성이 부족합니다.

이 문제를 해결하려면 CSS 규칙을 수정하여

그리고 요소:

#table-wrapper {
  position: relative;
}

#table-scroll {
  height: 150px;
  overflow: auto;
  margin-top: 20px;
}

#table-wrapper table {
  width: 100%;
}

#table-wrapper table * {
  background: yellow;
  color: black;
}

#table-wrapper table thead th .text {
  position: absolute;
  top: -20px;
  z-index: 2;
  height: 20px;
  width: 35%;
  border: 1px solid red;
}

또한

<div> 내의 요소 ID가 "table-wrapper"인 요소:

<div>

이러한 변경 사항을 구현하면 HTML 테이블 내에 스크롤 막대를 성공적으로 표시하여 사용자가 내용을 원활하게 탐색할 수 있습니다.

위 내용은 HTML 테이블 스크롤 막대를 표시하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

css html while number this display table tbody issue

성명：

이전 기사：테이블 구조를 유지하면서 테이블 본문에서 오버플로 스크롤을 어떻게 구현할 수 있습니까?다음 기사：테이블 구조를 유지하면서 테이블 본문에서 오버플로 스크롤을 어떻게 구현할 수 있습니까?