एचटीएमएल टेबल को प्रिंट करते समय पेज ब्रेक से कैसे निपटें

261

मेरे पास एक परियोजना है जिसमें कई पंक्तियों के साथ एक HTML तालिका को प्रिंट करने की आवश्यकता होती है।

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

एकमात्र ऐसा प्रशंसनीय समाधान जिसके बारे में मैं सोच सकता हूं कि जरूरत पड़ने पर एक टेबल और फोर्स पेज-ब्रेक के बजाय स्टैक्ड डीआईवी का उपयोग किया जाता है .. लेकिन पूरे बदलाव से गुजरने से पहले मुझे लगा कि मैं यहां पहले पूछ सकता हूं।

— h3।
स्रोत

28

एक स्पर्शरेखा पर, यह <thead>निम्नलिखित सीएसएस के साथ आपकी तालिका में जोड़ने के लायक हो सकता है thead {display: table-header-group; }ताकि बाद के सभी पृष्ठों पर टेबल-हेडर को प्रिंट किया जा सके (डेटा को कम करने के लिए उपयोगी)।

— डेविड का कहना है कि मोनिका

277

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test</title>
<style type="text/css">
    table { page-break-inside:auto }
    tr    { page-break-inside:avoid; page-break-after:auto }
    thead { display:table-header-group }
    tfoot { display:table-footer-group }
</style>
</head>
<body>
    <table>
        <thead>
            <tr><th>heading</th></tr>
        </thead>
        <tfoot>
            <tr><td>notes</td></tr>
        </tfoot>
        <tbody>
        <tr>
            <td>x</td>
        </tr>
        <tr>
            <td>x</td>
        </tr>
        <!-- 500 more rows -->
        <tr>
            <td>x</td>
        </tr>
    </tbody>
    </table>
</body>
</html>

— सिनान annür
स्रोत

18

यह भी WebKit ब्राउज़रों (जैसे। सफारी और क्रोम) में विफल रहता है

— माइकल हैन

5

हालांकि यह ऐसा करने के लिए मानक-अनुरूप तरीका है, एकमात्र ब्राउज़र जो वर्तमान में मानक लागू करता है, ओपेरा है। ध्यान दें कि यह css2 का हिस्सा है, और इसलिए कार्यान्वयन की कमी आने वाले कुछ समय के लिए एक समस्या होने की संभावना है, क्योंकि जाहिरा तौर पर कोई भी परवाह नहीं करता है।

— PKH

16

CSS 2.1 विनिर्देश इंगित करता है कि पृष्ठ विराम शैली विशेषताएँ केवल ब्लॉक-स्तरीय तत्वों पर लागू होती हैं। तालिका पंक्तियों के लिए डिफ़ॉल्ट प्रदर्शन मोड तालिका-पंक्ति है। दुर्भाग्य से, कोई तालिका तत्व डिफ़ॉल्ट रूप से तालिका स्तर सहित ब्लॉक स्तर के तत्व नहीं हैं।

— 21

2

@ Sinan younür यह एक आवश्यकता नहीं है, इसलिए आप इस पर भरोसा नहीं कर सकते, और दुर्भाग्य से मेरे परीक्षण से मैं देख सकता हूं कि वेबकिट ने "हो सकता है" देखा और इसके अलावा कुछ भी अनदेखा किया। अजीब बात है, IE को कुछ बड़ी अच्छी टेबल प्रिंटिंग सपोर्ट मिली है। कभी नहीं सोचा था कि मैं किसी भी बिंदु पर इसकी प्रशंसा करूँगा।

— lsuarez

6

मैं पुष्टि कर सकता हूं कि यह क्रोम या किसी अन्य वेबकिट ब्राउज़र (जैसे सफारी, ओपेरा) में ठीक काम नहीं करता है - जब तक कि, "ठीक काम करता है" से आपका मतलब "वैकल्पिक मानी जाने वाली किसी भी सुविधा को छोड़कर" है। मुझे लगता है कि अधिकांश लोग चाहते हैं कि हेडर और फुटर चल रहे हैं, और टेबल जो केवल पंक्तियों के बीच पेज को तोड़ने की अनुमति देते हैं, जिनमें से न तो 2015/11/13 के अनुसार वेबकिट में लागू किया गया है।

— डॉक्टरडॉस्ट्रक्टो

47

नोट: पृष्ठ-विराम के बाद का उपयोग करते समय: हमेशा टैग के लिए यह तालिका के अंतिम बिट के बाद एक पृष्ठ विराम पैदा करेगा, जो हर बार अंत में एक पूरी तरह से रिक्त पृष्ठ बनाता है! इसे ठीक करने के लिए इसे केवल पेज-ब्रेक-आफ्टर: ऑटो में बदलें। यह सही ढंग से टूट जाएगा और एक अतिरिक्त खाली पृष्ठ नहीं बनाएगा।

<html>
<head>
<style>
@media print
{
  table { page-break-after:auto }
  tr    { page-break-inside:avoid; page-break-after:auto }
  td    { page-break-inside:avoid; page-break-after:auto }
  thead { display:table-header-group }
  tfoot { display:table-footer-group }
}
</style>
</head>

<body>
....
</body>
</html>

— जोश पी
स्रोत

क्रोम पर मेरे लिए काम करता है और एक अच्छा सादा सीएसएस समाधान है।

— रयान

1

मैं एक ही समाधान का प्रयास कर रहा हूं, लेकिन यह तालिका डेटा को नहीं तोड़ता है और अगले पृष्ठ पर प्रदर्शित करने के बजाय अतिरिक्त डेटा को गायब कर देता है। कोई अंदाज़ा?

— नल पॉइंटर

24

सिनान solutionnür समाधान से विस्तार:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test</title>
<style type="text/css">
    table { page-break-inside:auto }
    div   { page-break-inside:avoid; } /* This is the key */
    thead { display:table-header-group }
    tfoot { display:table-footer-group }
</style>
</head>
<body>
    <table>
        <thead>
            <tr><th>heading</th></tr>
        </thead>
        <tfoot>
            <tr><td>notes</td></tr>
        </tfoot>
        <tr>
            <td><div>Long<br />cell<br />should'nt<br />be<br />cut</div></td>
        </tr>
        <tr>
            <td><div>Long<br />cell<br />should'nt<br />be<br />cut</div></td>
        </tr>
        <!-- 500 more rows -->
        <tr>
            <td>x</td>
        </tr>
    </tbody>
    </table>
</body>
</html>

ऐसा लगता है कि page-break-inside:avoidकुछ ब्राउज़रों में केवल ब्लॉक तत्वों के लिए ध्यान में रखा जाता है, सेल, टेबल, पंक्ति के लिए न तो इनलाइन-ब्लॉक।

आप करने की कोशिश टैग, और वहाँ का उपयोग , यह आपके तालिका लेआउट के साथ काम करता है, लेकिन भोजनालयों के आसपास।display:blockTRpage-break-inside:avoid

— vicenteherrera
स्रोत

2

यहाँ jquery के साथ divs को गतिशील रूप से जोड़ने का एक आसान तरीका है:$(document).ready(function(){$("table tbody th, table tbody td").wrapInner("<div></div>");});

— क्रिस ब्लूम

1

सायन ürün, vicenteherrera और Chrisbloom7 के लिए धन्यवाद। मैंने आपके उत्तरों के संयोजन को लागू किया और यह अब काम करता है!

— नूरक काया

आप tr { display: block; }सभी असंगत <div>तत्वों को जोड़ने के बजाय प्रिंट के लिए @media CSS सेट करने का प्रयास कर सकते हैं। (परीक्षण किया गया है, लेकिन देखने लायक नहीं है)

— स्टीफन आर

11

यहां किसी भी जवाब ने मेरे लिए क्रोम में काम नहीं किया। गिटहब पर एवरिन ने इस उद्देश्य के लिए कुछ उपयोगी जावास्क्रिप्ट बनाई है और यह मेरे लिए काम की है:

बस अपने कोड में js जोड़ें और अपनी तालिका में 'स्प्लिटफ़ॉरप्रिंट' वर्ग जोड़ें और यह बड़े करीने से तालिका को कई पृष्ठों में विभाजित करेगा और प्रत्येक पृष्ठ पर तालिका शीर्षलेख जोड़ देगा।

— MDave
स्रोत

क्या आपके पास इसका नमूना है कि इसे कैसे लागू किया जाए? मैं अपने टेबल क्लासनेम को असाइन करने की कोशिश कर रहा हूं, splitForPrintलेकिन जेएस में कहीं भी क्लासनाम का उपयोग करने वाले तत्व का संदर्भ नहीं लिया गया है splitForPrint। केवल वह हिस्सा जहां var splitClassName = 'splitForPrint';लेकिन वह है।

— कॉम्पैक LE2202x

डाउन वोट दिया क्योंकि आपके द्वारा लिंक की गई स्क्रिप्ट काफी चेरी-पिकिंग और पुन: कॉन्फ़िगर किए बिना ओपी की समस्या को हल नहीं करती है, और आपने ऐसा करने के बारे में कोई उदाहरण नहीं दिया है।

— क्रिस ब्लूम

मेरे लिए एक आकर्षण की तरह काम किया, अन्य समाधानों में से कोई भी काम नहीं किया। +1 को सही ब्रेक प्राप्त करने के लिए थोड़ा सीएसएस जोड़ना पड़ा ।पेज-ब्रेक {पेज-ब्रेक-आफ्टर: हमेशा; }

— फगुआ

जोड़कर पृष्ठ। तोड़-तोड़ {पृष्ठ-विराम-बाद: हमेशा; } यह मेरा दिन बच गया!

— दूधिया

7

इन सीएसएस गुणों का उपयोग करें:

page-break-after

page-break-before

उदाहरण के लिए:

<html>
<head>
<style>
@media print
{
table {page-break-after:always}
}
</style>
</head>

<body>
....
</body>
</html>

के जरिए

— marcgg
स्रोत

मुझे यकीन नहीं है, आपको जांचना होगा यदि नहीं, तो अलग अलग विन्यास में, विभाजन और एक खाली div द्वारा सरणियों अलग

— marcgg

आपको इसे तालिका पंक्ति या सेल पर लागू करना होगा, लेकिन तालिका में नहीं, मुझे लगता है। इसके अलावा, यह काम करना चाहिए।

— पेका

2

क्रोम में काम नहीं करता है। को अनदेखा किया जाता है जैसे कि

— 6/13/2012

5

मैंने हाल ही में एक अच्छे समाधान के साथ इस समस्या को हल किया है।

सीएसएस :

.avoidBreak { 
    border: 2px solid;
    page-break-inside:avoid;
}

जेएस :

function Print(){
    $(".tableToPrint td, .tableToPrint th").each(function(){ $(this).css("width",  $(this).width() + "px")  });
    $(".tableToPrint tr").wrap("<div class='avoidBreak'></div>");
    window.print();
}

एक जादू की तरह काम करता है!

— वेन्डेल टावारेस
स्रोत

2

मैंने @ vicenteherrera के दृष्टिकोण का अनुसरण किया, कुछ ट्विक्स के साथ (जो संभवतः बूटस्ट्रैप 3 विशिष्ट हैं)।

मूल रूप से; हम ब्लॉक-स्तर के तत्व नहीं होने के कारण trs, या tds को नहीं तोड़ सकते । इसलिए हम divप्रत्येक में एम्बेड करते हैं, और हमारे page-break-*नियमों को लागू करते हैं div। दूसरी बात यह है; हम इनमें से प्रत्येक div के शीर्ष पर कुछ पैडिंग जोड़ते हैं, ताकि किसी भी स्टाइलिंग कलाकृतियों के लिए क्षतिपूर्ति की जा सके।

<style>
    @media print {
        /* avoid cutting tr's in half */
        th div, td div {
            margin-top:-8px;
            padding-top:8px;
            page-break-inside:avoid;
        }
    }
</style>
<script>
    $(document).ready(function(){
        // Wrap each tr and td's content within a div
        // (todo: add logic so we only do this when printing)
        $("table tbody th, table tbody td").wrapInner("<div></div>");
    })
</script>

मार्जिन और पैडिंग समायोजन कुछ प्रकार के घबराहट को ऑफसेट करने के लिए आवश्यक थे जो पेश किए जा रहे थे (मेरे अनुमान से - बूटस्ट्रैप से)। मुझे यकीन नहीं है कि मैं इस प्रश्न के अन्य उत्तरों से कोई नया समाधान पेश कर रहा हूं, लेकिन मुझे लगता है कि यह किसी की मदद करेगा।

— हारून
स्रोत

1

मैंने एक ही समस्या का सामना किया और एक समाधान के लिए हर जगह खोज की, आखिर में, मैंने कुछ फव्वारा किया जो मेरे लिए हर ब्राउज़र के लिए काम करता है।

html {
height: 0;
}

इस सीएसएस का उपयोग करें या सीएसएस के बजाय आपके पास यह जावास्क्रिप्ट हो सकता है

$("html").height(0);

आशा है कि यह आपके लिए भी काम करेगा।

— नीलकंठ
स्रोत

0

मैंने कई समाधानों की जाँच की और कोई भी अच्छा काम नहीं कर रहा था।

इसलिए मैंने एक छोटी सी कोशिश की और यह काम करता है:

शैली के साथ tfoot:position: fixed; bottom: 0px; अंतिम पृष्ठ के नीचे रखा गया है, लेकिन यदि पाद बहुत अधिक है तो इसे तालिका की सामग्री द्वारा ओवरलैप किया जाता है।

केवल साथ tfoot: display: table-footer-group; ओवरलैप नहीं किया गया है, लेकिन पिछले पृष्ठ के तल पर नहीं है ...

आइए डालते हैं दो टफूट:

TFOOT.placer {
  display: table-footer-group;
  height: 130px;
}

TFOOT.contenter {
  display: table-footer-group;
  position: fixed;
  bottom: 0px;	
  height: 130px;
}

<TFOOT  class='placer'> 
  <TR>
    <TD>
      <!--  empty here
-->
    </TD>
  </TR>
</TFOOT>	
<TFOOT  class='contenter'> 
  <TR>
    <TD>
      your long text or high image here
    </TD>
  </TR>
</TFOOT>

स्निपेट का विस्तार करें

एक गैर-अंतिम पृष्ठों पर रखता है, दूसरा आपके उच्चारण पाद में डालता है।

— ज़ेनन के।
स्रोत

-1

मैंने ऊपर दिए गए सभी सुझावों की कोशिश की है और इस मुद्दे के लिए सरल और काम कर रहे क्रॉस ब्राउज़र समाधान पाया है। इस समाधान के लिए किसी शैली या पृष्ठ विराम की आवश्यकता नहीं है। समाधान के लिए, तालिका का प्रारूप इस प्रकार होना चाहिए:

<table>
    <thead>  <!-- there should be <thead> tag-->
        <td>Heading</td> <!--//inside <thead> should be <td> it should not be <th>-->
    </thead>
    <tbody><!---<tbody>also must-->
        <tr>
            <td>data</td>
        </tr>
        <!--100 more rows-->
    </tbody>
</table>

क्रॉस ब्राउज़र में परीक्षण और कार्य करने के ऊपर का प्रारूप

— अनंत दोस
स्रोत

-2

वैसे दोस्तों ... यहाँ समाधान के अधिकांश के लिए काम नहीं किया। तो इस तरह से मेरे लिए काम किया है ..

एचटीएमएल

<table>
  <thead>
   <tr>
     <th style="border:none;height:26px;"></th>
     <th style="border:none;height:26px;"></th>
     .
     .
   </tr>
   <tr>
     <th style="border:1px solid black">ABC</th>
     <th style="border:1px solid black">ABC</th>
     .
     .
   <tr>
  </thead>
<tbody>

    //YOUR CODE

</tbody>
</table>

सिर के पहले सेट का उपयोग डमी के रूप में किया जाता है ताकि पेज ब्रेक के दौरान 2 हेड (यानी मूल सिर) में एक लापता शीर्ष सीमा न हो।

— अनीश
स्रोत

-3

स्वीकृत उत्तर मेरे लिए सभी ब्राउज़रों में काम नहीं करता था, लेकिन निम्नलिखित सीएसएस ने मेरे लिए काम किया:

tr    
{ 
  display: table-row-group;
  page-break-inside:avoid; 
  page-break-after:auto;
}

HTML संरचना थी:

<table>
  <thead>
    <tr></tr>
  </thead>
  <tbody>
    <tr></tr>
    <tr></tr>
    ...
  </tbody>
</table>

मेरे मामले में, के साथ कुछ अतिरिक्त मुद्दे थे thead tr, लेकिन इससे टेबल की पंक्तियों को टूटने से रोकने का मूल मुद्दा हल हो गया।

हेडर के मुद्दों के कारण, मैं आखिरकार समाप्त हो गया:

#theTable td *
{
  page-break-inside:avoid;
}

इससे पंक्तियों को टूटने से नहीं रोका गया; बस प्रत्येक कोशिका की सामग्री।

— डेविड मॉलर
स्रोत