बाद के पृष्ठों पर कस्टम शीर्षलेख के साथ एचटीएमएल तालिका प्रिंट करें

जब कोई तालिका वाला एचटीएमएल होता है और आप इसे प्रिंट करना चाहते हैं, तो तालिका तालिका के कितनी देर के आधार पर विभाजित हो सकती है या नहीं हो सकती है। यदि यह विभाजन वहाँ तालिका की शीर्ष दोहराने के लिए, कि आप जोड़ सकते हैं करने के लिए एक तरीका है:बाद के पृष्ठों पर कस्टम शीर्षलेख के साथ एचटीएमएल तालिका प्रिंट करें

thead { 
    display: header-table-group; 
}

मुझे क्या करना चाहते हैं पहले पृष्ठ को छोड़ने के लिए है, इसलिए हैडर केवल अगले पृष्ठों पर दिखाया जाएगा ।

क्या ऐसा करने का कोई तरीका है?

स्रोत

2012-09-10 Hassek

क्या थाड: पहला बच्चा काम करेगा? या तालिका वास्तव में टैग पर विभाजित होती है (यानी

.....

....) – Lowkase

मेरे पास कोई विचार नहीं है कि यह ब्राउज़र से कुछ करता है और यह मुझे निरीक्षण करने की अनुमति नहीं देता है। मैं इसे आज़मा दूंगा और – Hassek

उत्तर दूंगा कि यह काम नहीं करता है लेकिन एक उचित दृष्टिकोण था। धन्यवाद – Hassek

उत्तर

यदि आपकी <thead> की एक निश्चित ऊंचाई है, तो इसे पहले पृष्ठ पर छिपाना बहुत आसान है। आपको बस में overflow: hidden; के साथ तालिका को घोंसला करना है, और उसके बाद हेडर को छुपाने के लिए तालिका में नकारात्मक शीर्ष मार्जिन जोड़ें।

उदाहरण:

<style> 
    .headless { 
    overflow: hidden; 
    line-height: 20px; 
    } 
    .headless > table { 
    margin-top: -22px; 
    border-spacing: 0; 
    } 
    .headless > table > * > tr > * { 
    border-right: 2px solid black; 
    border-bottom: 2px solid black; 
    padding: 0 4px 0 4px; 
    } 
    .headless > table > * > tr > :first-child {border-left: 2px solid black;} 
    .headless > table > thead > :first-child > th {border-top: 2px solid black;} 
</style> 

<div class="headless"> 
    <table> 
    <thead> 
     <tr> 
     <th>Header</th> 
     <th>Header</th> 
     <th>Header</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
     <td>data</td> 
     <td>data</td> 
     <td>data</td> 
     </tr> 
     <tr> 
     <td>data</td> 
     <td>data</td> 
     <td>data</td> 
     </tr> 
    </tbody> 
    </table> 
</div>

ध्यान दें कि शीर्ष लेख केवल ब्राउज़रों कि तालिका हेडर, जो क्रोम, सफारी, या ओपेरा शामिल नहीं है दोहरा समर्थन में अगले पृष्ठों पर दिखाया जाएगा।

स्रोत

2014-09-10 22:21:45 DoctorDestructo

संबंधित मुद्दे