테이블 본문(tbody)의 높이를 설정하고 HTML에서 오버플로 스크롤을 활성화하려면 어떻게 해야 합니까?

오버플로 스크롤로 표 본문 높이 설정

HTML 표로 작업할 때 직면하게 되는 일반적인 문제 중 하나는 표의 높이를 설정할 수 없다는 것입니다. 오버플로 스크롤을 활성화하는 동안 body(tbody)를 사용합니다. 이로 인해 테이블 ​​데이터가 잘리거나 예상대로 표시되지 않을 수 있습니다.

이 문제를 해결하려면 tbody와 포함 테이블 모두의 CSS 속성을 조정해야 합니다.

1. tbody 스타일:

• 디스플레이 설정: 블록; 기본 테이블 그리드 레이아웃을 제거하여 tbody가 블록 수준 요소처럼 동작하도록 합니다.
• 높이를 사용하여 tbody에 대해 원하는 높이를 지정합니다.
• overflow: 스크롤을 설정하여 오버플로를 활성화합니다. .

2. 테이블 스타일:

• 오버플로 설정: 숨김; 내용이 테이블 밖으로 넘치지 않도록 합니다.
• 테이블 레이아웃 사용: 고정; 열 너비를 균등하게 분배합니다.

3. 컨테이너 테이블:

어떤 경우에는 컨테이너 div 내에서 테이블을 래핑하고 수직 스크롤을 활성화하기 위해 스크롤하도록 div의 Overflow-y를 설정해야 할 수도 있습니다.

다음을 따르세요. 이러한 단계를 통해 오버플로 스크롤을 유지하면서 tbody의 높이를 효과적으로 설정할 수 있으므로 테이블 데이터가 잘리거나 잘리지 않고 표시될 수 있습니다. 숨겨져 있습니다.

코드 예:

<style>
  tbody {
    display: block;
    height: 50px;
    overflow: scroll;
  }

  table {
    table-layout: fixed;
    overflow: hidden;
  }

  #table-container {
    overflow-y: scroll;
  }
</style>

<div>

참고: 이 접근 방식에는 헤더 및 헤더 정렬이 잘못될 수 있는 등 특정 제한이나 단점이 있을 수 있습니다. 신체 세포. 테이블의 특정 요구 사항에 맞게 필요에 따라 CSS를 테스트하고 조정하는 것이 중요합니다.

위 내용은 테이블 본문(tbody)의 높이를 설정하고 HTML에서 오버플로 스크롤을 활성화하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!