행을 여러 페이지에 걸쳐 인쇄하지 못하도록 html 테이블 인쇄

인쇄용으로 멋지게 렌더링되도록 프로그래밍 방식으로 html을 생성합니다.행을 여러 페이지에 걸쳐 인쇄하지 못하도록 html 테이블 인쇄

여러 페이지에 걸쳐있을 수있는 표를 인쇄해야합니다. 여기에는 다음과 같은 이상이 페이지를 확산 셀 내용을 방지하는 등의 몇 가지 문제가 포즈 : 나는 순서대로 <tr> 요소 display: block를 사용 this answer과 함께 page-break-inside:avoid를 사용 this answer의 솔루션을 발견

그것들이 수직으로 분열되는 것을 막기 위해서입니다.

그러나 이로 인해 행이 더 이상 서로 수직으로 정렬되지 않습니다. 어떻게 수정해야합니까?

그리고 여기가 인쇄 렌더링 작업은 다음과 같습니다 : 여기

그것을 보는 방법 (브라우저는 화면에 그것을 렌더링하는 방법)의

어떻게 할 페이지를 인쇄 할 때 세로로 똑같이 셀을 유지할 수있는 능력을 잃지 않고도 화면에 정렬 된대로 인쇄물을 정렬 할 수 있습니까? MacOS에서 Webkit (Safari)에서 작동해야합니다.

다음은 완전한 html 코드입니다.

이

<!DOCTYPE html><html><head><meta charset="utf-8"><style type="text/css"> 
th, td { border: 1px solid #aaa; } 
@media print { 
    table, tr, td, th { 
    page-break-inside: avoid; 
    } 
    tr { 
    display: block; 
    page-break-before: auto; 
    } 
} 
</style></head> 
<body> 
<table style="width:40%"> 
    <tr><th>A</th><th>B</th><th>C</th></tr> 
    <tr><td>more text<br>1<br>2<br>3<br>4<br>5<br></td><td>more text</td><td>more text</td></tr> 
    <tr><td>1<br>2<br>3<br>4<br>5<br>6<br></td><td>x</td><td>x</td></tr> 
    <tr><td>1<br>2<br>3<br>4<br>5<br>6<br></td><td>x</td><td>x</td></tr> 
    <tr><td>1<br>2<br>3<br>4<br>5<br>6<br></td><td>x</td><td>x</td></tr> 
    <tr><td>1<br>2<br>3<br>4<br>5<br>6<br></td><td>x</td><td>x</td></tr> 
    <tr><td>1<br>2<br>3<br>4<br>5<br>6<br></td><td>x</td><td>x</td></tr> 
    <tr><td>1<br>2<br>3<br>4<br>5<br>6<br></td><td>x</td><td>x</td></tr> 
    <tr><td>1<br>2<br>3<br>4<br>5<br>6<br></td><td>x</td><td>x</td></tr> 
    <tr><td>1<br>2<br>3<br>4<br>5<br>6<br></td><td>x</td><td>x</td></tr> 
    <tr><td>1<br>2<br>3<br>4<br>5<br>6<br></td><td>x</td><td>x</td></tr> 
</table> 
</body></html>

업데이트 : 나는 또한 this solution을 시도

이 사용하는 하나의 개별 세포 (바람직하지 않은) 다음 페이지 하나에 반반 표시 여부를 확인할 수 있도록 두 페이지에 걸쳐 table 대신 div입니다. 인쇄 할 때 약간 다른 결과를 제공하지만, 여전히 나쁜 (현재 셀의 높이도 잘못) :

출처

2017-11-24 Thomas Tempelmann

이 예제 코드가 작동 할 @media print { } 내부의 트릭을

td, th { 
    width: 10000px; 
}

를 않았다 추가 .

이제 인쇄 된 열이 제대로 다시 정렬되고 각 행은 두 페이지에 걸쳐 있지 않고 단일 페이지에 유지됩니다.

현재 버전의 Webkit (Safari), FF 및 Chrome에서 작동합니다 (모두 macOS에서만 테스트 됨).

경고 :

불행하게도, 위의 증거를 속일 수 없습니다. 이 예제에서는 각 행의 셀의 너비가 동일하기 때문에 작동합니다.

이러한 너비가 임의로되면 10000 픽셀과 같은 도달 픽셀 너비가 열을 다시 엉망으로 만듭니다.

이 문제를 해결할 수있는 유일한 해결책은 실제 너비를 제공하는 것입니다. 이것은 인쇄용이며 특정 용지 형식 (예 : DIN A4 또는 US Letter)으로 인쇄하려는 것으로 알고 있으므로 열 너비를 정확하게 지정할 수 있습니다.

화면상의 브라우저에서 웹 페이지보기의 경우이 솔루션은 좋지 않지만 총 너비가 다를 수있는 경우 대상 인쇄 크기를 예측할 수있는 한 인쇄를위한 좋은 해결책입니다 . 여기

는 4cm로 열 폭을 설정 완전한 HTML 코드, 및 2cm 3cm :

<!DOCTYPE html><html><head><meta charset="utf-8"><style type="text/css"> 
th, td { border: 1px solid #aaa; } 
@media print { 
    table, tr, td, th { 
    page-break-inside: avoid; 
    } 
    tr { 
    display: block; 
    page-break-before: auto; 
    } 
    td:nth-child(1), th:nth-child(1) { 
    width: 4cm; 
    } 
    td:nth-child(2), th:nth-child(2) { 
    width: 2cm; 
    } 
    td:nth-child(3), th:nth-child(3) { 
    width: 3cm; 
    } 
} 
</style></head> 
<body> 
<table> 
    <tr><th>A</th><th>B</th><th>C</th></tr> 
    <tr><td>more text<br>1<br>2<br>3<br>4<br>5<br></td><td>more text</td><td>more text</td></tr> 
    <tr><td>1 adasd<br>2<br>3<br>4<br>5<br>6<br></td><td>x</td><td>x</td></tr> 
    <tr><td>1<br>2<br>3<br>4<br>5<br>6<br></td><td>x</td><td>x</td></tr> 
    <tr><td>1<br>2<br>3<br>4<br>5<br>6<br></td><td>x</td><td>x</td></tr> 
    <tr><td>1asd<br>2<br>3<br>4<br>5<br>6<br></td><td>x</td><td>x</td></tr> 
    <tr><td>1<br>2<br>3<br>4<br>5<br>6<br></td><td>x</td><td>x</td></tr> 
    <tr><td>1<br>2<br>3<br>4<br>5<br>6<br></td><td>xsdsdfsf</td><td>x</td></tr> 
    <tr><td>1<br>2<br>3<br>4<br>5<br>6<br></td><td>x</td><td>x</td></tr> 
    <tr><td>1<br>2 asda asdas<br>3<br>4<br>5<br>6<br></td><td>xasdada</td><td>x</td></tr> 
    <tr><td>1<br>2<br>3<br>4 asdasd <br>5<br>6<br></td><td>x</td><td>x</td></tr> 
</table> 
</body></html>

출처

2017-11-26 17:08:08

행을 여러 페이지에 걸쳐 인쇄하지 못하도록 html 테이블 인쇄

답변

관련 문제