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

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

---

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 스타일을 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>

Chrome이 '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;
}

I actually found this solution on Stack Overflow, but it didn't show up in initial Google searches: CSS to stop page break inside of table row

Kudos to @Ibrennan208 for solving the problem!

---

I wrote the following JavaScript based on Aaron Hill's answer:

//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" />');
    }
});

Where dontSplit is the class of the table where you don't want the td's to split across pages. Use this with the following CSS (again, attributed to 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 */
  }

This appears to be working nicely in the latest version of Chrome.

---

Using CSS page-break-inside won't work (this is a webkit browser issue).

There is a wkhtmltopdf JavaScript table splitting hack which breaks a long table into smaller tables automatically depending on the page size you specify (rather than page breaking after a static value of x rows): https://gist.github.com/3683510

---

The only way I found to work was to place each TR element inside it's own TBODY element, and apply the page break rules to the TBODY element via css

---

Try with

white-space: nowrap; 

style to td to avoid it breaking on new lines.

참고URL : https://stackoverflow.com/questions/9288802/avoid-page-break-inside-row-of-table