wkhtmltopdf로 html을 PDF로 변환 할 때 html의 테이블 행 내부에서 페이지 나누기를 피하고 싶습니다. 나는 page-break-inside : avoid with table- 그 작품을 사용하지만 너무 많은 행이 있고 작동하지 않습니다. tr의 표시를 블록이나 다른 것으로 설정하면 테이블의 서식을 변경하고 이중 테두리를 삽입합니다. 또는 테이블이 분할 된 각 페이지에 테이블 머리글을 삽입 할 수 있습니다.
답변
CSS로 이것을 시도 할 수 있습니다.
<table class="print-friendly">
<!-- The rest of your table here -->
</table>
<style>
table.print-friendly tr td, table.print-friendly tr th {
page-break-inside: avoid;
}
</style>
대부분의 CSS 규칙은 <tr>
위에서 지적한 것과 정확히 일치하기 때문에 태그에 직접 적용되지 않습니다 . 고유 한 display
스타일 이있어 이러한 CSS 규칙을 허용하지 않습니다. 그러나, <td>
그리고 <th>
그 안에 태그는 일반적으로 할 사양의이 종류를 할 수 – 당신은 쉽게 ALL에 자식 – 같은 규칙을 적용 할 수 <tr>
의 및 <td>
위의 그림과 같이의 사용 CSS를.
답변
웹킷 브라우저에서이 문제를 처리하는 가장 좋은 방법은 각 td 요소 안에 div를 넣고 page-break-inside : avoid style to the div를 적용하는 것입니다.
...
<td>
<div class="avoid">
Cell content.
</div>
</td>
...
<style type="text/css">
.avoid {
page-break-inside: avoid !important;
margin: 4px 0 4px 0; /* to keep the page break from cutting too close to the text in the div */
}
</style>
비록 크롬이 ‘page-break-inside : avoid;’를 인식하지 못하더라도 속성, 이것은 wktohtml을 사용하여 PDF를 생성 할 때 페이지 나누기에 의해 행 내용이 반으로 분할되는 것을 방지하는 것 같습니다. tr 요소는 페이지 나누기 위에 약간 걸릴 수 있지만 div 및 그 안의 모든 요소는 그렇지 않습니다.
답변
위의 @AaronHill ( link ) 의 4px 트릭을 사용 했으며 정말 잘 작동했습니다! <td>
테이블의 각 클래스에 클래스를 추가 할 필요없이 더 간단한 CSS 규칙을 사용했습니다 .
@media print {
table tbody tr td:before,
table tbody tr td:after {
content : "" ;
height : 4px ;
display : block ;
}
}
답변
나는 적어도 나를 위해이 문제를 해결하는 새로운 방법을 찾았습니다 (MacOS Sierra의 Chrome 버전 63.0.3239.84 (공식 빌드) (64 비트))
상위 테이블에 CSS 규칙을 추가합니다.
table{
border-collapse:collapse;
}
그리고 td의 경우 :
tr td{
page-break-inside: avoid;
white-space: nowrap;
}
실제로 Stack Overflow에서이 솔루션을 찾았지만 초기 Google 검색에는 표시되지 않았습니다.
테이블 행 내부에서 페이지 나누기를 중지하는 CSS
문제를 해결 한 @ Ibrennan208에게 찬사를 보냅니다!
답변
CSS page-break-inside 사용이 작동하지 않습니다 (웹킷 브라우저 문제).
지정한 페이지 크기에 따라 자동으로 긴 테이블을 작은 테이블로 나누는 wkhtmltopdf JavaScript 테이블 분할 해킹이 있습니다 (x 행의 정적 값 이후 페이지 나누기 대신) : https://gist.github.com/3683510
답변
Aaron Hill의 답변을 기반으로 다음 JavaScript를 작성했습니다.
//Add a div to each table cell so these don't break across pages when printed
//See http://stackoverflow.com/a/17982110/201648
$(document).ready(function () {
var ctlTd = $('.dontSplit td');
if (ctlTd.length > 0)
{
//console.log('Found ctlTd');
ctlTd.wrapInner('<div class="avoidBreak" />');
}
});
여기서 dontSplit 은 td가 여러 페이지로 분할되는 것을 원하지 않는 테이블의 클래스입니다. 다음 CSS와 함께 이것을 사용하십시오 (다시 Aaron Hill에 귀속됨).
.avoidBreak {
page-break-inside: avoid !important;
margin: 4px 0 4px 0; /* to keep the page break from cutting too close to the text in the div */
}
이것은 최신 버전의 Chrome에서 잘 작동하는 것 같습니다.
답변
내가 찾은 유일한 방법은 각 TR 요소를 자체 TBODY 요소 안에 배치하고 CSS를 통해 TBODY 요소에 페이지 나누기 규칙을 적용하는 것입니다.