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 요소에 페이지 나누기 규칙을 적용하는 것입니다.

시도

white-space: nowrap; 

스타일을 td로 변경하여 새 줄에서 끊어지지 않도록합니다.

page-break-inside: avoid테이블의 부모 요소가 display: inline-block또는 인 경우 작동하지 않는 것으로 나타났습니다 flex. 모든 상위 요소가display: block .

또한 재정을 고려 table, tr, td의 displayCSS에 스타일 grid인쇄 레이아웃은 테이블에 문제가 계속합니다.

2020 년 솔루션

모든 브라우저에서 일관되게 작업 할 수있는 유일한 방법 은 각 행을 자체 테이블 요소 안에 넣는 것 입니다. 이것은 노드 HTML-PDF에서도 작동합니다. 그런 다음 모든 것을 page-break-inside: avoid.

table,
tr,
td,
div {
    page-break-inside: avoid;
}

이것의 유일한 단점은 열 너비를 수동으로 설정해야한다는 것입니다. 그렇지 않으면 다소 이상하게 보입니다. 다음은 두 개의 열로 나를 위해 잘 작동했습니다.

td:first-child { width: 30% }
td:last-child { width: 70% }

예

<table>
  <tr>
    <td>Forename</td>
    <td>John</td>
  </tr>
</table>
<table>
  <tr>
    <td>Surname</td>
    <td>Piper</td>
  </tr>
</table>
<table>
  <tr>
    <td>Website</td>
    <td>desiringgod.org</td>
  </tr>
</table>

이것은 오래된 질문이지만 최근에 동일한 오류가 발생했습니다. 제 경우의 문제 table-responsive는 우연히 <table>요소 에 사용 된 Bootstrap의 클래스 와 관련이 있습니다.

따라서 동일한 문제가있는 경우 wkhtmltopdf를 호출 할 때 클래스 table-responsive에서 제거해보십시오 <table>.