Làm cách nào để áp dụng ngắt trang CSS để in một bảng có nhiều hàng?

Question

Tôi có một bảng động trong trang web của tôi mà đôi khi chứa nhiều hàng. Tôi biết có page-break-before và page-break-after thuộc tính CSS. Tôi đặt chúng vào mã của mình ở đâu để buộc trang bị vi phạm nếu cần?

Answer 1

Bạn có thể sử dụng như sau:

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

Tham khảo đặc điểm kỹ thuật CSS Print Profile của W3C để biết chi tiết.

Và cũng tham khảo Salesforce developer forums.

Answer 2

Dưới đây là một ví dụ:

Via css:

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

hoặc trực tiếp trên các yếu tố:

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

Answer 3

Bất cứ nơi nào bạn muốn áp dụng nghỉ ngơi, hoặc là một table hay tr, bạn cần phải đưa ra một lớp cho ex. page-break với CSS như đã đề cập dưới đây:

/* 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"> 

và nó sẽ làm việc như bạn cần

Ngoài ra, bạn cũng có thể có div cấu trúc cho cùng:

CSS:

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

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

Div :

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

Answer 4

Tôi đã xem xét để khắc phục sự cố này. Tôi có một trang web di động jquery có trang in cuối cùng và nó kết hợp hàng chục trang. Tôi đã thử tất cả các bản sửa lỗi ở trên nhưng điều duy nhất tôi có thể làm việc là:

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

Answer 5

Thật không may các ví dụ trên không có tác dụng với tôi trong Chrome.

Tôi đã đưa ra giải pháp dưới đây, nơi bạn có thể chỉ định chiều cao tối đa trong PX của mỗi trang. Điều này sau đó sẽ chia bảng thành các bảng riêng biệt khi các hàng bằng chiều cao đó.

$(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(); 

}); 

Bạn cũng sẽ cần dưới đây trong stylesheet của bạn

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

Answer 6

này đang làm việc cho tôi:

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

Từ chủ đề này: avoid page break inside row of table