왜 내 몸이 스크롤되지 않습니까?

테이블 본문(tbody)의 오버플로 스크롤 문제 해결

오버플로 스크롤을 활성화하면서 tbody 요소의 높이를 설정하려는 노력 중에 다음 CSS를 접했을 수 있습니다. 조각:

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

이 스타일을 구현했음에도 불구하고 tbody 요소는 여전히 응답하지 않습니다. 스크롤. 이 문제를 해결하려면 다음 CSS 규칙을 활용하는 것이 좋습니다.

• display: block; for tbody: 스크롤이 가능하도록 tbody 요소를 블록 요소로 변환합니다.
• display: table; for tr: 각 tr 요소의 표시 속성을 table로 설정하여 테이블 동작을 유지합니다.
• table-layout:fixed; tr 및 thead의 경우: 테이블 레이아웃을 사용하여 셀의 균일한 분포를 보장합니다: 고정; tr 및 thead 요소 모두에 대해.

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); /* Adjust for scrollbar width */
}

table {
  width: 400px;
}

콘텐츠가 부족하여 tbody 요소가 여전히 스크롤 막대를 표시하지 못하는 경우 오버플로 속성을 명시적으로 Overflow-y: 스크롤로 설정합니다.

tbody {
  ...
  overflow-y: scroll;
}

참고: 테이블 스크롤을 달성하기 위한 이러한 접근 방식은 특정 시나리오에서 제한이 있을 수 있다는 점을 인식하는 것이 중요합니다. 특히 헤더 셀과 본문 셀 사이의 정렬이 잘못될 수 있습니다. 정렬이 중요한 경우 CSS 그리드와 같은 보다 강력한 레이아웃 기술을 사용하는 것이 좋습니다.

위 내용은 왜 내 몸이 스크롤되지 않습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!