[html] 테이블 행 내부에서 페이지 나누기 방지

Question 1

wkhtmltopdf로 html을 PDF로 변환 할 때 html의 테이블 행 내부에서 페이지 나누기를 피하고 싶습니다. 나는 page-break-inside : avoid with table- 그 작품을 사용하지만 너무 많은 행이 있고 작동하지 않습니다. tr의 표시를 블록이나 다른 것으로 설정하면 테이블의 서식을 변경하고 이중 테두리를 삽입합니다. 또는 테이블이 분할 된 각 페이지에 테이블 머리글을 삽입 할 수 있습니다.

Question 2

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를.

Question 3

웹킷 브라우저에서이 문제를 처리하는 가장 좋은 방법은 각 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 및 그 안의 모든 요소는 그렇지 않습니다.

Question 4

위의 @AaronHill ( link ) 의 4px 트릭을 사용 했으며 정말 잘 작동했습니다! <td>테이블의 각 클래스에 클래스를 추가 할 필요없이 더 간단한 CSS 규칙을 사용했습니다 .

@media print {
    table tbody tr td:before,
    table tbody tr td:after {
        content : "" ;
        height : 4px ;
        display : block ;
    }
}

Question 5

나는 적어도 나를 위해이 문제를 해결하는 새로운 방법을 찾았습니다 (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에게 찬사를 보냅니다!

Question 6

CSS page-break-inside 사용이 작동하지 않습니다 (웹킷 브라우저 문제).

지정한 페이지 크기에 따라 자동으로 긴 테이블을 작은 테이블로 나누는 wkhtmltopdf JavaScript 테이블 분할 해킹이 있습니다 (x 행의 정적 값 이후 페이지 나누기 대신) : https://gist.github.com/3683510

Question 7

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에서 잘 작동하는 것 같습니다.

Question 8

내가 찾은 유일한 방법은 각 TR 요소를 자체 TBODY 요소 안에 배치하고 CSS를 통해 TBODY 요소에 페이지 나누기 규칙을 적용하는 것입니다.