CSS 페이지 나누기를 적용하여 행이 많은 표를 인쇄하는 방법은 무엇입니까?

내 웹 페이지에 때때로 많은 행을 포함하는 동적 테이블이 있습니다. 나는 거기 알고 page-break-before및 page-break-afterCSS 속성. 필요한 경우 페이지를 강제로 나누기 위해 코드에 어디에 두어야합니까?

다음을 사용할 수 있습니다.

<style type="text/css">
   table { page-break-inside:auto }
   tr    { page-break-inside:avoid; page-break-after:auto }
</style>

자세한 내용은 W3C의 CSS 인쇄 프로필 사양을 참조하십시오.

또한 Salesforce 개발자 포럼을 참조하십시오 .

휴식을 적용하려면 a table또는 tr, ex에 대한 클래스를 제공해야합니다. page-break아래와 같이 CSS를 사용합니다.

/* class works for table row */
table tr.page-break{
  page-break-after:always
} 

<tr class="page-break">

/* class works for table */
table.page-break{
  page-break-after:always
}

<table class="page-break">

필요에 따라 작동합니다.

또는 div동일한 구조를 가질 수도 있습니다 .

CSS :

@media all {
 .page-break  { display: none; }
}

@media print {
 .page-break  { display: block; page-break-before: always; }
}

사업부 :

<div class="page-break"></div>

이 문제를 해결하기 위해 주위를 둘러 보았습니다. 최종 인쇄 페이지가 있고 수십 페이지를 결합한 jquery 모바일 사이트가 있습니다. 위의 모든 수정 사항을 시도했지만 작업 할 수있는 유일한 방법은 다음과 같습니다.

<div style="clear:both!important;"/></div>
<div style="page-break-after:always"></div> 
<div style="clear:both!important;"/> </div>

불행히도 위의 예는 Chrome에서 작동하지 않았습니다.

각 페이지의 PX에서 최대 높이를 지정할 수있는 아래 솔루션을 생각해 냈습니다. 그러면 행이 해당 높이와 같을 때 테이블이 별도의 테이블로 분할됩니다.

$(document).ready(function(){

    var MaxHeight = 200;
    var RunningHeight = 0;
    var PageNo = 1;

    $('table.splitForPrint>tbody>tr').each(function () {

        if (RunningHeight + $(this).height() > MaxHeight) {
            RunningHeight = 0;
            PageNo += 1;
        }

        RunningHeight += $(this).height();

        $(this).attr("data-page-no", PageNo);

    });

    for(i = 1; i <= PageNo; i++){

        $('table.splitForPrint').parent().append("<div class='tablePage'><hr /><table id='Table" + i + "'><tbody></tbody></table><hr /></div>");

        var rows = $('table tr[data-page-no="' + i + '"]');

        $('#Table' + i).find("tbody").append(rows);
    }
    $('table.splitForPrint').remove();

});

스타일 시트에 아래 항목도 필요합니다.

    div.tablePage {
        page-break-inside:avoid; page-break-after:always;            
    }

이것은 나를 위해 일하고 있습니다.

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

이 스레드에서 : 테이블 행 내부에서 페이지 나누기 방지

한 페이지에 원하는 수를 알고 있다면 언제든지이 작업을 수행 할 수 있습니다. 매 20 번째 항목마다 새 페이지가 시작됩니다.

.row-item:nth-child(20n) {
    page-break-after: always;
    page-break-inside: avoid;
}

결국 테이블을 넘쳐서 제대로 깨지지 않는 대량 콘텐츠가 테이블 안에있을 필요조차 없다는 것을 결국 깨달았습니다.

기술적 인 해결책은 아니지만 더 이상 테이블이 필요하지 않을 때 간단히 테이블을 끝내는 것으로 문제를 해결했습니다. 그런 다음 바닥 글에 대해 새 것을 시작했습니다.

누군가에게 도움이되기를 바랍니다 ... 행운을 빕니다!

다음은 그 예입니다.

CSS를 통해 :

<style>
  .my-table {
    page-break-before: always;
    page-break-after: always;
  }
  .my-table tr {
    page-break-inside: avoid;
  }
</style>

또는 요소에서 직접 :

<table style="page-break-before: always; page-break-after: always;">
  <tr style="page-break-inside: avoid;">
    ..
  </tr>
</table>

당신은 사용해야합니다

<tbody> 
  <tr>
  first page content here 
  </tr>
  <tr>
  ..
  </tr>
</tbody>
<tbody>
  next page content...
</tbody>

그리고 CSS :

tbody { display: block; page-break-before: avoid; }
tbody { display: block; page-break-after: always; }