세로 스크롤 막대가 나타나도록 테이블의 높이를 지정하는 방법은 무엇입니까?

내 페이지에 많은 행이있는 테이블이 있습니다. 테이블 높이를 500px로 설정하여 테이블 높이가 그보다 크면 세로 스크롤 막대가 나타납니다. 에서 CSS height속성 을 사용하려고했지만 table작동하지 않습니다.

overflowCSS 속성을 사용해보십시오 . 가로 오버플로 ( overflow-x) 및 세로 오버플로 ( overflow-y) 의 동작을 정의하는 별도의 속성도 있습니다 .

세로 스크롤 만 원하므로 다음을 시도하십시오.

table {
  height: 500px;
  overflow-y: scroll;
}

편집하다:

분명히 <table>요소는 overflow속성을 존중하지 않습니다 . 이는 <table>요소가 display: block기본적으로 렌더링되지 않기 때문인 것으로 보입니다 (실제로 자체 표시 유형이 있음). 요소를 블록 유형 overflow으로 설정 하여 속성이 작동 하도록 할 수 있습니다 <table>.

table {
  display: block;
  height: 500px;
  overflow-y: scroll;
}

이렇게하면 요소의 너비가 100 %가되므로 페이지의 전체 가로 너비를 차지하지 않으려면 요소에 대해 명시적인 너비도 지정해야합니다.

다른 요소 안에 테이블을 감싸고 해당 요소의 높이를 설정해야합니다. 인라인 CSS를 사용한 예 :

<div style="height: 500px; overflow: auto;">
 <table>
 </table>
</div>

테이블 높이를 설정하려면 먼저 css 속성 "display : block"을 설정 한 다음 "width / height"속성을 추가 할 수 있습니다. 이 Mozilla 기사는 표 스타일 지정 방법을 배우는 데 매우 유용한 리소스입니다. 링크