HTML 테이블에서 오버플로 스크롤을 사용하여 tbody 높이를 올바르게 설정하는 방법은 무엇입니까?

오버플로 스크롤로 tbody 높이 설정

HTML에서 테이블 작업을 할 때 활성화하는 동안 tbody 요소의 높이를 제한해야 하는 경우가 있습니다. 오버플로 스크롤. 불행하게도 tbody의 디스플레이: 스크롤 속성만으로는 충분하지 않습니다.

원하는 효과를 얻으려면 CSS 속성의 조합이 필요합니다.

1. 블록 디스플레이:

디스플레이 설정: tbody를 블록하여 테이블 흐름에서 벗어나 자체 너비와 높이를 차지하도록 허용합니다.

2. 고정 높이:

tbody의 높이를 50px(또는 원하는 대로) 지정하여 높이를 정의합니다.

3. 테이블 행에 대한 테이블 표시:

테이블과 같은 동작을 유지하기 위해 테이블 ​​본문의 tr 요소에 표시: 테이블을 설정합니다.

4. 고정 테이블 레이아웃:

테이블 레이아웃 사용: 균일한 셀 분포를 보장하기 위해 thead 및 tbody tr에 고정.

5. thead 너비 조정:

스크롤 막대 너비를 보상하려면 width: calc(100% -)를 사용하여 thead 너비를 약간 줄이세요. 1em).

예:

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를 설정하세요. tbody에서 스크롤하세요.

또한 그리드 레이아웃이나 JavaScript 기반 솔루션과 같은 다른 옵션과 비교하여 이 접근 방식의 한계를 고려하는 것이 중요합니다.

위 내용은 HTML 테이블에서 오버플로 스크롤을 사용하여 tbody 높이를 올바르게 설정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!