तालिका की पंक्ति के अंदर पृष्ठ विराम से बचें

Question

मैं HTML में तालिका की पंक्ति के अंदर पृष्ठ विराम से बचना चाहता हूं, जब मैं HTML को wkhtmltopdf द्वारा पीडीएफ में परिवर्तित करता हूं। मैं पेज-ब्रेक-इन का उपयोग करता हूं: टेबल के साथ से बचें- इसके कार्य, लेकिन मेरे पास बहुत सारी पंक्तियां हैं, फिर काम नहीं करता। यदि tr या किसी अन्य चीज के रूप में tr का प्रदर्शन सेट होता है तो यह तालिका के स्वरूपण को बदल देता है और दोहरी सीमा सम्मिलित करता है। या प्रत्येक पृष्ठ पर तालिका शीर्षलेख सम्मिलित करना संभव है, जहां तालिका छप गई थी।

Comments

क्षमा करें, उपयोग करते समय क्या समस्या है page-break-inside: avoid;?

— क्रिश्चियन

@ChristianVarga जब मैं पेज-ब्रेक-इन का उपयोग करता हूं: ट्राई से बचें, यह काम नहीं करता है

— अंकित मित्तल

तालिकाओं के साथ पृष्ठ टूटना काफी छोटी बात है। इस पर एक नज़र डालिए

— जोना

वास्तव में मैंने page-break-inside:avoidtr td जैसे सभी तालिका तत्वों के साथ कोशिश की है , लेकिन यह काम नहीं किया।

— अंकित मित्तल

WebGL के लिए Yay Google, तेज जावास्क्रिप्ट, पोर्टेबल देशी क्लाइंट को अंधा कर रहा है, लेकिन हम अभी भी डेटा टेबल प्रिंट नहीं कर सकते हैं। ऐसा करने की आवश्यकता किसे होगी ??? केवल दुनिया के हर व्यवसाय के बारे में। संयोग से, मैंने अभी-अभी Google डॉक्स में एक स्प्रेडशीट छापने की कोशिश की है, और यह लगातार मेरे क्रोम को क्रैश करता है। मुझे लगता है कि Google डॉक्स पीडीएफ के माध्यम से प्रिंट करता है। : /

— सैम वाटकिंस

Answer 1

आप सीएसएस के साथ यह कोशिश कर सकते हैं:

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

अधिकांश सीएसएस नियम <tr>सीधे टैग पर लागू नहीं होते हैं, क्योंकि वास्तव में आपने जो ऊपर बताया था - उनकी एक अनूठी displayशैली है, जो इन सीएसएस नियमों की अनुमति नहीं देती है। हालांकि, <td>और <th>उनके भीतर टैग आम तौर पर करते हैं विनिर्देश इस तरह की अनुमति देते हैं - और आप आसानी से इस तरह के नियमों सभी के लिए बच्चे के आवेदन कर सकते हैं <tr>की और <td>जैसा कि ऊपर दिखाया है सीएसएस का उपयोग कर।

Comments

दुर्भाग्य से यह वेबकिट आधारित ब्राउज़रों के साथ काम नहीं करता (अभी तक) है।

— अत्तिला फुलोप

हाँ - कुछ विषमताएँ हैं। इस प्रश्न में @ पीटर का उत्तर देखें: stackoverflow.com/questions/7706504/… कुछ और जानकारी के लिए।

— ट्रॉय अल्फोर्ड

यह केवल तभी काम करता है जब आप पूरी तालिका लेते हैं, न कि केवल tr / td: stackoverflow.com/a/13525758/729324

— marcovtwout

मैं IE8 में इस के साथ मुद्दों में भाग लिया है, संभवतः अन्य, जहां यह पूरी मेज का कारण बनता है एक पृष्ठ पर फिट करने की कोशिश करता है और किसी भी अतिप्रवाह को काट देता है। यह इन तालिकाओं के लिए "स्केल टू फिट" विकल्प को नजरअंदाज करना भी प्रतीत हुआ।

— टॉम पिएत्रोसांटी

@AttilaFulop फिर भी? आपकी पोस्ट 3 साल पुरानी है और मैं अभी भी इसे काम नहीं कर सकता। धन्यवाद

— relipse

Answer 2

वेबकिट ब्राउज़र में इस समस्या से निपटने का सबसे अच्छा तरीका है कि मैं प्रत्येक td तत्व के अंदर एक div डालूं और पेज-ब्रेक-इन को लागू करूं: इस तरह से 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>

भले ही क्रोम माना जाता है कि 'पृष्ठ-विराम-अंदर: पहचान से बचें: नहीं;' संपत्ति, यह पीडीएफ को उत्पन्न करने के लिए wktohtml का उपयोग करते समय पृष्ठ विराम से पंक्ति की सामग्री को आधे हिस्से में विभाजित होने से बचाती है। पृष्ठ पर tr तत्व थोड़ा लटका हो सकता है, लेकिन div और इसके अंदर कुछ भी नहीं होगा।

Comments

margin: 4px 0 4px 0;मेरे लिए चाल किया था, मैं कभी कभी एक रिकॉर्ड घाटे में थी। धन्यवाद

— Wartodust

इस दृष्टिकोण के साथ एक समस्या यह है कि कभी-कभी एक पंक्ति की केवल कुछ कोशिकाएं अगले पृष्ठ पर टूट जाती हैं, हालांकि अपने आप ही प्रत्येक कोशिका टूट नहीं जाएगी।

— वर्ल्डसेंडर

@WorldSEnder हाँ। क्या आपको इसके लिए कोई काम मिला?

— रंजनगा

काम नहीं करता है। कुछ भी काम नहीं करता है। मैंने इंटरनेट पर हर "समाधान" की कोशिश की और कोई समाधान नहीं है। हमें बस बकवास सॉफ़्टवेयर को स्वीकार करना होगा जो एक तालिका भी प्रस्तुत नहीं कर सकता है।

— निकोलस आर।

Answer 3

मैंने @AaronHill के ऊपर ( लिंक ) द्वारा 4px चाल का उपयोग किया और यह वास्तव में अच्छी तरह से काम किया! मैंने <td>टेबल में प्रत्येक के लिए एक वर्ग जोड़ने की आवश्यकता के बिना एक सरल सीएसएस नियम का उपयोग किया ।

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

Answer 4

मैंने इस समस्या को हल करने के लिए एक नया तरीका ढूंढा है, कम से कम मेरे लिए (क्रोम संस्करण 63.0.3239.84 (आधिकारिक बिल्ड) (64 बिट) मैकओएस सिएरा पर)

मूल तालिका में CSS नियम जोड़ें:

table{
    border-collapse:collapse;
}

और td के लिए:

tr td{
    page-break-inside: avoid;
    white-space: nowrap;
}

मुझे वास्तव में स्टैक ओवरफ्लो पर यह समाधान मिला, लेकिन यह प्रारंभिक Google खोजों में नहीं दिखा: सीएसएस को टेबल रो के अंदर पृष्ठ विराम को रोकने के लिए

समस्या को हल करने के लिए @ Ibrennan208 को यश!

Comments

कटिंग टेबल रो के अपने हल किए गए मुद्दे को इसके अन्य डिज़ाइन

— aviboy2006

Answer 5

CSS पेज-ब्रेक-इन का उपयोग करना काम नहीं करेगा (यह एक वेबकिट ब्राउज़र समस्या है)।

एक wttmltopdf जावास्क्रिप्ट टेबल स्प्लिटिंग हैक है जो आपके द्वारा निर्दिष्ट पृष्ठ आकार के आधार पर छोटी तालिका में स्वचालित रूप से एक लंबी तालिका को तोड़ता है (बजाय एक्स पंक्तियों के स्थिर मूल्य के बाद पृष्ठ को तोड़ने पर): https://gist.github.com/3683510

Comments

अगर मैं सिर्फ wkhtmltopdf के बिना वेबपेज प्रिंट करना चाहता हूं तो यह js हैक काम करेगा?

— 120196

यह एकमात्र ऐसा है जिसने मेरे लिए काम किया। HTML-PDF लाइब्रेरी के साथ भी काम करता है।

— गिल्बर्ट-वी

Answer 6

मैंने आरोन हिल के उत्तर के आधार पर निम्नलिखित जावास्क्रिप्ट लिखा:

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

जहाँ NOTSplit तालिका का वह वर्ग है जहाँ आप नहीं चाहते कि td का पृष्ठों में विभाजन हो। निम्नलिखित सीएसएस के साथ इसका उपयोग करें (फिर से, आरोन हिल के लिए जिम्मेदार):

 .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 */
  }

ऐसा प्रतीत होता है कि क्रोम के नवीनतम संस्करण में अच्छी तरह से काम कर रहा है।

Comments

मैं wkhtmltopdf का उपयोग करके पीडीएफ प्रारूप में बड़ी तालिकाओं को प्रदान कर रहा हूं, और यह एकमात्र समाधान है जो स्वीकार्य परिणाम प्राप्त करता है। यह बेहतर हो सकता है (वेबकिट पृष्ठ विराम के बाद सेल सीमाओं को दोहराता नहीं है), लेकिन कम से कम सामग्री तो है। धन्यवाद!

— जोनाथन हिल

Answer 7

मेरे काम करने का एकमात्र तरीका यह था कि प्रत्येक TR तत्व को अपने अंदर TBODY तत्व रखें, और css के माध्यम से TBODY तत्व में पृष्ठ विराम नियम लागू करें

Comments

यह आर्कियम लिनक्स पर क्रोमियम संस्करण 40.0.2214.111 (64-बिट) पर मेरे लिए बाकी की तुलना में बेहतर काम करता है। यह बदसूरत है और tbodytable

— हैकी

यह मेरे लिए काम नहीं करता है (क्रोम 56.0.2924.87 (64-बिट), मैक ओएस 10.12.2)।

— हाट दिन्ह

Answer 8

के साथ प्रयास करें

white-space: nowrap; 

नई लाइनों पर इसे तोड़ने से बचने के लिए td शैली।

Comments

अन्य समाधानों की तुलना में बहुत सरल। क्या यह नई बात है?

— बेन्डेको

Answer 9

मैंने पाया है कि page-break-inside: avoidअगर तालिका के मूल तत्वों में से कोई भी काम नहीं करेगा display: inline-blockया flex। सुनिश्चित करें कि सभी मूल तत्व हैं display: block।

इसके अलावा अधिभावी पर विचार table, tr, tdके displayसीएसएस के साथ शैलियों gridप्रिंट लेआउट के लिए यदि आप तालिका के साथ मुद्दों कर रखने के लिए।

Answer 10

2020 समाधान

केवल एक चीज जो मुझे लगातार सभी ब्राउज़रों पर काम करने के लिए मिल सकती है, वह है प्रत्येक पंक्ति को अपने स्वयं के तालिका तत्व के अंदर रखना । यह नोड HTML-PDF के साथ भी काम करता है। फिर बस सब कुछ सेट करें page-break-inside: avoid।

table,
tr,
td,
div {
    page-break-inside: avoid;
}

इसका एकमात्र नुकसान यह है कि आपको कॉलम की चौड़ाई को मैन्युअल रूप से सेट करना होगा, अन्यथा यह अजीब लग रहा है। निम्नलिखित ने दो कॉलम के साथ मेरे लिए अच्छा काम किया।

td:first-child { width: 30% }
td:last-child { width: 70% }

---

उदाहरण

<table>
  <tr>
    <td>Forename</td>
    <td>John</td>
  </tr>
</table>
<table>
  <tr>
    <td>Surname</td>
    <td>Piper</td>
  </tr>
</table>
<table>
  <tr>
    <td>Website</td>
    <td>desiringgod.org</td>
  </tr>
</table>

Comments

क्या आप एक उदाहरण तालिका HTML प्रदान कर सकते हैं? धन्यवाद।

— पवनभूषण

उदाहरण के साथ संपादन के लिए धन्यवाद @ @ गिल्बर्ट- v। मैं यह कोशिश करूंगा।

— PavanBhushan