고정 높이로 테이블의 TBody를 스크롤 가능하게 만들려면 어떻게 해야 합니까?

오버플로우 스크롤로 TBody 높이 설정

오버플로우 스크롤로 테이블 본문(tbody)의 높이를 설정하려고 하면 사용자가 어려움을 겪을 수 있습니다. 다음은 원하는 결과를 얻기 위한 단계별 가이드입니다.

tbody가 스크롤바를 표시하도록 하려면 표시 속성을 블록으로 지정하세요. 이렇게 하면 콘텐츠가 수직으로 흐를 수 있습니다.

다음으로 tbody 내 각 tr 요소의 표시 속성을 table로 설정합니다. 이렇게 하면 행의 테이블과 같은 동작이 유지됩니다.

셀을 균등하게 분배하려면 테이블 레이아웃: 고정; 상위 테이블 요소의 속성입니다. 이렇게 하면 모든 셀의 너비가 동일해지고 테이블이 접히는 것을 방지할 수 있습니다.

최신 접근 방식에서는 여기에 설명된 기술보다 그리드 레이아웃을 선호한다는 점에 유의하는 것이 중요합니다. 그리드 레이아웃은 향상된 제어 기능과 더 적은 부작용을 제공합니다.

다음은 솔루션을 보여주는 CSS 예제입니다.

table, tr td {
  border: 1px solid red;
}

tbody {
  display: block;
  height: 50px;
  overflow: auto;
}

thead, tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}

thead {
  width: calc(100% - 1em);
}

table {
  width: 400px;
}

콘텐츠가 부족하여 tbody가 여전히 스크롤 막대를 표시하지 않는 경우 명시적으로 Overflow-y 속성을 스크롤하도록 설정합니다.

그러나 이 속성의 특정 단점을 인식하는 것이 중요합니다. 접근 방식:

• ad와 tbody 셀 그리드를 분리하여 잠재적으로 정렬에 영향을 줍니다.
• 요즘에는 이러한 문제를 방지하는 그리드 레이아웃과 같은 더 나은 대안이 있습니다.

위 내용은 고정 높이로 테이블의 TBody를 스크롤 가능하게 만들려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!