내 페이지에 많은 행이있는 테이블이 있습니다. 테이블 높이를 500px로 설정하여 테이블 높이가 그보다 크면 세로 스크롤 막대가 나타납니다. 에서 CSS height
속성 을 사용하려고했지만 table
작동하지 않습니다.
답변
overflow
CSS 속성을 사용해보십시오 . 가로 오버플로 ( 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 기사는 표 스타일 지정 방법을 배우는 데 매우 유용한 리소스입니다.
링크