मेरे पास <table> डेटा है जहां लगातार पंक्तियां अवधारणात्मक रूप से संबंधित हैं और उन्हें साथ रहने की आवश्यकता है। मैंने पंक्तियों की प्रत्येक जोड़ी को <tbody> टैग में समूहित किया है। जब तालिका मुद्रित करने का समय आता है, तो मैं यह सुनिश्चित करना चाहता हूं कि पेज ब्रेक केवल <tbody> टैग के बीच होता है।क्रोम से प्रिंट करते समय केवल पृष्ठ के बीच पृष्ठ ब्रेक
मैं page-break-inside: avoid और page-break-after: auto के कुछ रूपों की कोशिश की है, लेकिन यह क्रोम 42 में काम करने के लिए प्राप्त करने के लिए नहीं कर पा रहे हैं (नीचे स्क्रीनशॉट देखें)
हालांकि, यह के रूप में काम करने लगता है है हालांकि फ़ायरफ़ॉक्स 40 और आईई 11 में उम्मीद है। ऐसा लगता है कि page-break-* केवल ब्लॉक स्तर तत्वों पर लागू हो सकता है। क्या एचटीएमएल/सीएसएस में इसे पूरा करने का कोई अच्छा तरीका है?
उदाहरण कोड:
<!doctype html>
<html>
<head>
<style>
table {
width: 70%;
border-collapse: collapse;
}
thead {
display: table-header-group;
text-align: left;
border-bottom: 2px solid #000;
}
tbody {
page-break-inside: avoid;
border-bottom: 1px solid #ccc;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Project #</th>
<th>Owner</th>
<th>% Complete</th>
</tr>
</thead>
<tbody>
<tr>
<td>HR-123</td>
<td>Arther Dent</td>
<td>42%</td>
</tr>
<tr>
<td colspan='3'>Description: Find travel guide to get me back to earth.</td>
</tr>
</tbody>
<tbody>
<tr>
<td>RD-123</td>
<td>Frodo Baggins</td>
<td>9%</td>
</tr>
<tr>
<td colspan='3'>Description: Find a better way to get the ring to Mordor.</td>
</tr>
</tbody>
<!-- repeat tbody sections as necessary to get onto the second page -->
</table>
</body>
</html>
यहाँ एक JSFiddle है कि आप मैं क्या हासिल करना कोशिश कर रहा हूँ की एक विचार का एक सा दे देंगे है।
संपादित करें: मैं एक तालिका का उपयोग नहीं है, लेकिन विचार (i) मैं अपने कॉलम लाइन अप करना चाहते हैं, और (ii) मैं वास्तव में नहीं है कड़ी मेहनत से कोड स्तंभ चौड़ाई को सुनिश्चित करना चाहते हैं के बाद से नहीं किया था वे वही वही है।
मैं बहुत अभी तक तालिकाओं के साथ अनुभव नहीं कर रहा हूँ, लेकिन मैं आपको कुछ का उपयोग करने के की सलाह देते हैं डिस्प्ले के साथ divs: इनलाइन-ब्लॉक और अवधि क्योंकि टेबल थोड़ा जटिल हैं ... – Hydro
युक्ति: तालिकाओं के साथ पेज-ब्रेक गुणों से बचें, फ़्लोटिंग तत्व, और सीमाओं वाले ब्लॉक तत्वों से बचें। – Andrew