2012-05-15 11 views
5

मेरे पास अपेक्षाकृत लंबी तालिका है। प्रत्येक रिकॉर्ड में छह पंक्तियां होती हैं। तो 16 के पहचानकर्ता के साथ एक आइटम <tr-16-1><tr-16-2>.....<tr-16-6> है, पहचानकर्ता 25 <tr-25-1><tr-25-2>.....<tr-25-6>, आदिग्रुपिंग टेबल पंक्तियां और पेज ब्रेक

मैं चाहता हूं कि पेज छः पंक्तियों के किसी भी समूह को विभाजित न करे। तो यदि <tr-25-6> एक नए पेज पर जारी रहेगा, तो मुझे इसके साथ तोड़ने के लिए सभी <tr-25's> चाहिए।

यदि मैं मदद करता हूं तो मैं आसानी से सभी छः पंक्तियों में कक्षा संलग्न कर सकता हूं। क्या कोई मुझे सही दिशा में इंगित कर सकता है कि यह कैसे करें? आपकी सहायता के लिए बहुत - बहुत धन्यवाद।

+0

जब कहते हैं _ एक नए पेज पर क्या आप प्रिंट नियमों के बारे में बात कर रहे हैं? – fcalderan

+0

बिल्कुल - धन्यवाद। –

उत्तर

5

एक संभावना सभी पंक्तियों है कि एक ही tbody अंदर ही रिकॉर्ड की बात कर रहे समूहीकरण है, तो आप हर एक 6 पंक्तियों से युक्त अधिक tbody है (it's perfectly fine और एक परमाणु समूह के रूप में तार्किक प्रतीत हो रहा है), तो यह जोड़ने मीडिया प्रिंट

@media print { 
    tbody { 
     page-break-inside: avoid; 
    } 
} 

इस तरह से एक tbody अंदर एक पृष्ठ विराम से बचा जाना होगा के लिए राज करते हैं।
दुर्भाग्य page-break-inside हर आधुनिक ब्राउज़र पर समर्थित है except Firefox (बग #132035)

+1

बस इतना ही दिया कि सभी टी समूहों को अपने स्वयं के टैग टैग में लपेट लिया गया लेकिन दुर्भाग्यवश, इसने समस्या को हल नहीं किया। मैंने क्रोम और आईई दोनों में कोशिश की। –

+0

क्या आप कुछ डेटा के साथ एक उदाहरण खराब कर सकते हैं और अपना प्रश्न अपडेट कर सकते हैं? मैं – fcalderan

+1

की जांच करने की कोशिश करूंगा बहुत बहुत धन्यवाद। मैंने http://jsfiddle.net/wKvuP/ पर एक नमूना पोस्ट किया। पेज ब्रेक के लिए पर्याप्त जानकारी बनाने के लिए आपको डेटा दोहराने की आवश्यकता हो सकती है। आपकी सहायता के लिए एक बार फिर से धन्यवाद। –

1

मैं इस एक शॉट देना होगा:

@media print { 
    tr, td, th { page-break-inside:avoid } 
} 
1

आप @media टैग का उपयोग नहीं करना चाहते हैं, तो यह एक और तरीका है :

अपनी तालिका में class=print-entire जोड़ें, और इस शैली को जोड़ने:

table.print-entire tr td, table.print-entire tr th { 
     page-break-inside: avoid; 
    } 
संबंधित मुद्दे