는 제가테이블에 최대 높이를 설정하는 브라우저 간 방법은 무엇입니까?
#ml_container table>tbody{ height: 500px; overflow: auto; overflow-x: hidden; }
문제가 테이블 1 개 항목이있는 경우, 1 개 항목 FF3 높은 500 픽셀이라고 인 TBODY의 높이를 설정하는 테이블을 가지고있다. 1 항목이 여전히 20px (또는 내가 지정한 것)가되고 싶습니다. 또 다른 문제는 사파리가이 500px 설정을 인식하지 못해 테이블에 최대 높이가 없기 때문입니다. 난 단지 한 번에 500px의 높은 가치의 항목을 표시 할 수있는 스크롤 가능한 표가 필요합니다. 이 작업을 수행하는 방법에 대한 아이디어가 있습니까?
테이블 요소에 고정 높이 또는 최대 높이를 설정할 수 없습니다. The height property is only treated as a minimum height.
당신 은 당신의 tbody에 display: block를 추가 할 수 있습니다. 이 경우 더 이상 table-* display types 중 하나가 아니기 때문에 은이됩니다. 그러나 tbody은 더 이상 table-row-group이 아니므로 기본적으로 내부에 암시 적 테이블이 생성됩니다. 따라서 다른 thead, tbody 또는 tfoot 요소의 모든 열은 더 이상 해당 스크롤 가능 tbody과 일렬로 정렬되지 않습니다.
열의 불일치는 별개이지만, 거의은 IE를 제외한 모든 최신 브라우저에서 작동합니다. 남은 문제는 직접 해결할 수 있어야합니다.
IE에서 문제를 해결하는 방법을 모르겠습니다. 나는 "Pure CSS Scrollable Table with Fixed Header"을 보았지만, 그의 솔루션은 IE6에서 모두 작동하기 때문에 시대에 뒤떨어져있다.하지만 IE7과 IE8에서는 다른 방식으로 무섭다. 그들은 을이 IE의 Quirks 모드에서 작동하지만 필사적으로 필요하다면 그것은 유일한 옵션 일 수 있습니다.
톰이 올바른 생각을 갖고 있습니다. 자바 스크립트를 사용하십시오. 창 크기가 너무 커서 테이블이 너무 커지면 테이블/요소에 고정 된 수동 높이를 설정하십시오. : D