CSS의 표 너비와 높이를 정의하여 인쇄 할 때 특정 폭/높이 비율을 갖습니다.

Question

인쇄 할 수 있도록 모든 웹 사이트 요소를 제거하는 특정 인쇄 CSS를 사용하는 웹 페이지에 표가 있습니다. 포스터에.

내가 할 것은 :

1. 방문 구글 크롬 페이지,
2. 클릭 : 파일 -> 인쇄 -> "시스템 대화 상자를 사용하여 인쇄 ...",
3. 클릭 PDF -> "PostScript로 저장"및
4. Adobe Distiller로 처리 (150 dpi & 18 "x 24").

내 테이블을 18 "x24"(18/24 = 3/4) 포스터로 채우고 싶기 때문에 너비/높이의 가로 세로 비율이 3/4인지 확인하려면 어떻게해야합니까? 나에게 인쇄물을 물려주게 될 구체적인 치수?

Answer 1

지금 내 머리에 나온 유일한 해결책은 두 개의 div과 함께 테이블을 포장해야한다는 것입니다.

는 여기에 내가 div의 없애 솔루션을 개선하기 위해 노력하고있어, 우리가 말하는 것처럼 fiddle

을합니다.

너비가 100 %로 설정된 wrapper으로 한 div를 사용하는 순간에는 그 안에 div33 (innerWrapper)이 절대적으로 배치되어 wrapper의 크기로 퍼집니다. div의 높이를 설정하려면 간단한 트릭을 사용했습니다. 에 pseudo :after 요소가 추가되었습니다 (padding-bottom은 133 %로 설정 됨). 패딩 비율 값은 부모의 width (예!)에서 상속됩니다. 누군가 묻는 경우에는 innerWrapper div를 생략하고 으로 직접 스타일을 설정하면 top, right, bottom, left 메서드가 작동하지 않으므로 (width 및 height은 100%으로 설정되지 않음) 사업부는 block 요소이며 표는 display: table입니다.
전체 코드는 다음과 같습니다

HTML :

<div id="wrapper"> 
    <div id="innerWrapper"> 
     <table></table> 
    </div> 
</div> 

CSS :와

#wrapper { 
    width:100%; 
    position: relative; 
} 
#wrapper:after { 
    content: ""; 
    display: block; 
    padding-bottom: 133%; 
} 
#innerWrapper { 
    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
} 
table { 
    width: 100%; 
    height: 100%; 
}