सीएसएस पेज-ब्रेक को कितनी पंक्तियों वाली तालिका मुद्रित करने के लिए आवेदन करें?

Question

मेरे पास मेरे वेब पेज में एक गतिशील तालिका है जिसमें कभी-कभी बहुत सारी पंक्तियां होती हैं। मुझे पता है कि page-break-before और page-break-after सीएसएस गुण हैं। यदि आवश्यक हो तो पेज ब्रेकिंग को मजबूर करने के लिए मैं उन्हें अपने कोड में कहां रखूं?

Answer 1

आप निम्न का उपयोग कर सकते हैं:

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

जानकारी के लिए देखें W3C के CSS Print Profile विनिर्देश।

और Salesforce developer forums भी देखें।

सीएसएस के माध्यम से:

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

या सीधे तत्व पर:

Answer 2

यहाँ एक उदाहरण है

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

Answer 3

आप कहीं भी एक ब्रेक लागू करना चाहते हैं, या तो एक table या tr, आपको पूर्व के लिए एक कक्षा देने की जरूरत है। सीएसएस के साथ page-break नीचे वर्णित के रूप में:

/* 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 संरचना हो सकता है यह काम करेगा:

सीएसएस:

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

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

डिव :

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

Answer 4

मैंने इसके लिए एक फिक्स के लिए चारों ओर देखा है। मेरे पास एक jquery मोबाइल साइट है जिसमें अंतिम प्रिंट पेज है और यह दर्जनों पृष्ठों को जोड़ता है। मैं ऊपर सब फिक्स करने की कोशिश की लेकिन केवल एक चीज मैं काम करने के लिए मिल सकता है यह है:

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

Answer 5

दुर्भाग्य से ऊपर दिए गए उदाहरणों क्रोम में मेरे लिए काम नहीं किया।

मैं नीचे दिए गए समाधान के साथ आया जहां आप प्रत्येक पृष्ठ के पीएक्स में अधिकतम ऊंचाई निर्दिष्ट कर सकते हैं। जब पंक्ति उस ऊंचाई के बराबर होती है तो यह टेबल को अलग-अलग तालिकाओं में विभाजित कर देगी।

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

Answer 6

यह मेरे लिए काम कर रहा है:

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

इस सूत्र से: avoid page break inside row of table