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


100

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


1
후자가 테이블의 높이를 강제하는 max-height대신 사용하는 것이 좋습니다height500px
Fred

1
머리글 행이 스크롤되지 않도록하는 방법에 대해 두 번째 질문을 할 수 있습니다. ;)
Bill Bingham

답변:


173

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 %가되므로 페이지의 전체 가로 너비를 차지하지 않으려면 요소에 대해 명시적인 너비도 지정해야합니다.


3
이것은 높이를 제한하지 않습니다.
프레드

6
아니, 그냥 필요하지 display:block그것처럼 행동하기 위해 테이블에 div jsfiddle.net/TSGSA/1
프레드

2
@Fred : 위대한 마음은 똑같이 생각합니다. 댓글을 남기는 동안 내 답변을 업데이트했습니다. :)
AgentConundrum

1
이 답변은 정말 도움이되었지만 스크롤 할 때 헤더가 정적으로 유지되도록 테이블 태그에 적용하는 대신 tbody에 적용해야합니다. 그런 다음 스크롤 막대 위에있는 광고의 영역과 관련하여 정렬 할 몇 가지 스타일이 있습니다.
데이비드

7
이것을 tbody에서 사용하려면 display : block을 thead (그리고 아마도 tfoot)에 추가해야합니다. 그렇지 않으면 약간 미쳐 버릴 수 있습니다. 문제는 일단 이렇게하면 thead와 tbody 사이의 연결이 끊어진 것 같습니다. 전자의 열은 후자의 너비를 인식하지 못합니다. 그래서 당신은 그것을 패치하고 당신이가는 미끄러운 경사면을 내려갑니다. "나는 ... 아름다움 사망"
Cuse70

59

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

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

9
이것은 tbody가 스크롤하는 동안 thead를 제자리에 유지하는 것을 허용하지 않습니다.
David

21
이 요구 사항은 원래 질문에 없습니다.
Dark Falcon

2
또한 다른 (허용되는) 대답은 광고를 제자리에 유지하지 않습니다.
Brock Adams

이 방법으로 헤더가있는 것처럼 보이게 할 수 있습니다. 표의 머리글을 숨긴 다음 머리글이있는 첫 번째 표 위에 두 번째 표를 만듭니다. 그런 다음 두 테이블의 스타일을 지정 display:table;하여 행 display:table-row;과 셀을 가지면 display:table-cell;두 테이블이 일치하여 하나로 표시됩니다. (참고 :이 매우 큰 테이블하지에게 작업을 수행, 그것은 내가이 기술을 여러 번 사용했습니다 때 기본적으로, 그것은 그들을 일치합니다..)
levininja

1
확실한. 상대 크기를 사용하려면 상위 크기를 지정해야합니다. 예 : jsfiddle.net/hz8wy
Dark Falcon

1

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

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.