डॉक्यूमेंट के हर प्रिंटेड पेज पर हेडर और फूटर प्रिंट करने के लिए HTML का उपयोग कैसे करें?

516

क्या प्रत्येक मुद्रित पृष्ठ पर कस्टम हेडर और फ़ुटर के साथ HTML पेज प्रिंट करना संभव है?

मैं Red, Arial में "UNCLASSIFIED" शब्द जोड़ना चाहूंगा, हर मुद्रित पृष्ठ के ऊपर और नीचे , सामग्री की परवाह किए बिना आकार के लिए 16pt ।

स्पष्ट करने के लिए, यदि दस्तावेज़ 5 पृष्ठों पर मुद्रित किया गया था, तो प्रत्येक पृष्ठ पर कस्टम हेडर और पाद लेख होना चाहिए।

किसी को पता है कि क्या यह HTML / CSS का उपयोग करना संभव है?

— Nhan
स्रोत

3

HTML को अच्छे PDF में बदलने के लिए CSS2 के बजाय XSL-FO का उपयोग क्यों देखें ? सवाल और जवाब।

— पीटर क्रूस

3

यह एक ऐसा सवाल है जिसका मैं लंबे समय तक जवाब देने की कोशिश करता हूं। लगता है कि समस्या की कुंजी पृष्ठ, शीर्ष-केंद्र, सामग्री, स्थिति जैसे सीएसएस तत्व होगी: चल रहा है (..)। यह कैसे देख सकता है कि ब्राउज़र पूरी तरह से @ पेज का समर्थन करेंगे: techrepublic.com/blog/webmaster/… alistapart.com/articles/boom alistapart.com/articles/building-books-with-css3 कुछ खुले मुद्दे: code.google.com / p / क्रोमियम / मुद्दे / विस्तार? id = 47277 bugs.webkit.org/show_bug.cgi?id=15548

— डैनियल

मैंने यहां एक क्रोम-संगत समाधान पोस्ट किया है जो उन दस्तावेज़ों के लिए एक रनिंग हैडर जोड़ देगा जिसमें पाठ के बड़े-बड़े विस्तार शामिल नहीं हैं। फिर भी पाद के लिए कोई समाधान नहीं, हालांकि।

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

2

संयोजन समाधान : दोनों pisition: fixedऔर thead tbody tfootतकनीकों के नुकसान हैं इसलिए आपको उन्हें गठबंधन करना चाहिए, यहां और पढ़ें ।

— मोहम्मद मुसवी

353

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

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

<div class="divFooter">UNCLASSIFIED</div>

सीएसएस:

@media screen {
  div.divFooter {
    display: none;
  }
}
@media print {
  div.divFooter {
    position: fixed;
    bottom: 0;
  }
}

— Infotekka
स्रोत

62

यदि आपके पास एक ऐसा तत्व है जो दो पृष्ठों (मेरे मामले में पूर्व) में फैला हुआ है तो काम नहीं करता है - पाद उस पर अधिलेखित हो जाएगा।

— बेंजोल

77

ऐसा लगता है कि वेबकिट ब्राउज़र इसका ठीक से समर्थन नहीं करते हैं। अगर मैं गलत हूँ तो मुझे सुधारो!

— ग्रेग लिंड

61

यह हर पृष्ठ पर दोहराना प्रतीत नहीं होता है।

— नॉर्थवेस्ट का टायसन

24

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

— छरवे

11

मैंने इसे फ़ायरफ़ॉक्स और क्रोम पर टेस्ट किया। फ़ायरफ़ॉक्स पर यह समाधान काम करता है, क्रोम पर नहीं।

— यारो

131

मेरा मानना है कि सही उत्तर यह है कि HTML 5 और CSS3 में पेज हेडर और फुटर के मुद्रण के लिए कोई समर्थन नहीं है print मीडिया ।

और जब आप इसके साथ अनुकरण करने में सक्षम हो सकते हैं:

टेबल
निश्चित स्थिति ब्लॉक

उनमें से प्रत्येक में बग होते हैं जो उन्हें आदर्श सामान्य समाधान होने से रोकते हैं।

— इयान बॉयड
स्रोत

36

अन्य उत्तरों पर विश्वास न करें। वे विशेष मामलों के लिए काम कर सकते हैं, लेकिन सामान्य रूप से बस बुरी तरह से टूट जाएंगे। प्रमुख ब्राउज़र में @page मार्जिन बॉक्स लागू होने तक कोई विश्वसनीय समाधान नहीं है। देखें: en.wikipedia.org/wiki/…

— user2847643

21

दुर्भाग्य से मुझे इसे उभारना है। भले ही हमारे पास वर्ष 2018 है ... हैक क्यों नहीं करते हैं, वे हमें एक @footerसाथ content:"stuff"या एक जैसे देते हैं।

— काई नैक

1

इन परिदृश्यों को संबोधित करने के लिए W3C में वास्तव में एक विनिर्देशन है।

— मेंडी

मुझे लगता है कि यह सबसे अच्छा जवाब है। समस्या ब्राउज़र विक्रेताओं की है। आप इन जैसे (और वहाँ अन्य) वाणिज्यिक उपकरणों के साथ CSS पेजेड मीडिया का उपयोग करके ब्राउज़र के बाहर अच्छे दिखने वाले पीडीएफ बना सकते हैं: ऐन्टेना हाउस एंटेनाहाउस / फॉर्मर , प्रिंस princexml.com ।

— चिह्नित करें

मैं इसे एक टिप्पणी के रूप में बना रहा हूं, जवाब नहीं, इसलिए कृपया मुझे "ओपी ने नहीं पूछा ..." के साथ मारा। एक संभावना एक पीडीएफ जनरेटर का उपयोग करना है जो आपको निश्चित हेडर और फुटर सेट करने की अनुमति देता है और इस प्रारूप में अपना दृष्टिकोण प्रस्तुत करता है जब उपयोगकर्ता तय करता है कि वे एक वास्तविक "प्रिंट पूर्वावलोकन" या मुद्रित दस्तावेज़ चाहते हैं। HTML स्क्रीन रेंडरिंग के लिए है और स्क्रीन में पृष्ठों की अवधारणा नहीं है। पीडीएफ मुद्रित दस्तावेज़ प्रारूप के लिए भी खड़ा हो सकता है (मुझे पता है, यह नहीं है) और एक ऐसा मोड है जहां पेज हेडर और पाद प्रासंगिक हैं। NReco.PdfGenerator व्यावसायिक उद्देश्यों या आज़माने के लिए बहुत सस्ती है।

— न्यूक्लियर

71

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

footer {
  font-size: 9px;
  color: #f00;
  text-align: center;
}

@page {
  size: A4;
  margin: 11mm 17mm 17mm 17mm;
}

@media print {
  footer {
    position: fixed;
    bottom: 0;
  }

  .content-block, p {
    page-break-inside: avoid;
  }

  html, body {
    width: 210mm;
    height: 297mm;
  }
}

के page-break-insideलिए pऔर content-blockमेरे लिए महत्वपूर्ण था। किसी भी समय मैं एक है pएक निम्नलिखित h*, मैं उन दोनों को एक में लपेटdiv class = "content-block"> वे एक साथ रह सकते हैं और नहीं टूटते सुनिश्चित करने के लिए।

मुझे उम्मीद है कि किसी को यह उपयोगी लगता है क्योंकि मुझे यह पता लगाने में लगभग 3 घंटे लगते हैं (मैं सीएसएस / एचटीएमएल के लिए भी नया हूं, इसलिए यह है ...)

संपादित करें

टिप्पणियों में एक अनुरोध के अनुसार, मैं एक उदाहरण HTML दस्तावेज़ जोड़ रहा हूं। आप इसे एक HTML फ़ाइल में कॉपी करना चाहते हैं, इसे खोल सकते हैं, और फिर पृष्ठ को प्रिंट करने के लिए चुन सकते हैं। प्रिंट पूर्वावलोकन को यह काम करना चाहिए। इसने मेरे अंत में फ़ायरफ़ॉक्स और IE में काम किया, लेकिन क्रोम ने एक पृष्ठ पर फिट होने के लिए फ़ॉन्ट को छोटा बना दिया, इसलिए यह वहां काम नहीं किया।

footer {
  font-size: 9px;
  color: #f00;
  text-align: center;
}

@page {
  size: A4;
  margin: 11mm 17mm 17mm 17mm;
}

@media print {
  footer {
    position: fixed;
    bottom: 0;
  }

  .content-block, p {
    page-break-inside: avoid;
  }

  html, body {
    width: 210mm;
    height: 297mm;
  }
}

<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <h1>
      Example Document
    </h1>
    <div>
      <p>
        This is an example document that shows how to have a footer that repeats at the bottom of every page, but also isn't covered up by paragraph text.
      </p>
    </div>
    <div>
      <h3>
        Example Section I
      </h3>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vestibulum metus sit amet urna lobortis sollicitudin. Nulla mattis purus porta lorem tempor, a cursus tellus facilisis. Aliquam pretium nibh vitae elit placerat vestibulum. Duis felis ipsum, consectetur id pellentesque in, porta sit amet sapien. Ut tristique enim sem, laoreet bibendum nisl fermentum vitae. Ut aliquet sem ac lorem malesuada sodales. Fusce iaculis ipsum ex, in mollis dolor dapibus sit amet. In convallis felis in orci fermentum gravida a vel orci. Sed tincidunt porta nibh sit amet varius. Donec et odio eget odio tempus auctor ac eget ex.
        
        Pellentesque vitae augue sed purus dictum ultricies at eu neque. Nullam ut mauris a purus tristique euismod. Sed elementum, leo id placerat congue, leo tellus pharetra orci, eget ultricies odio quam sit amet ipsum. Praesent feugiat, lorem at commodo egestas, felis ligula pharetra sapien, in placerat mauris nisi aliquet tortor. Quisque nibh lectus, laoreet vel mollis a, tincidunt vel ipsum. Sed blandit vehicula sollicitudin. Donec et sapien justo. Ut fermentum ipsum imperdiet diam condimentum, eget varius sapien dictum. Sed sed elit egestas libero maximus finibus eu eget massa.
        
        Duis finibus vestibulum finibus. Nunc lobortis lacus ut libero mattis tempor. Nulla a nunc at nisl elementum congue. Nunc eu consectetur mauris. Etiam non placerat massa. Etiam eu urna in metus tempus molestie sed eget diam. Nunc sem velit, elementum sit amet fringilla in, dictum sit amet sem. Quisque convallis faucibus purus dignissim dictum. Sed semper, mi vel accumsan sollicitudin, massa massa pellentesque justo, eget auctor sapien enim ac elit.
        
        Nullam turpis augue, lacinia ut libero ac, rhoncus bibendum ligula. Mauris ullamcorper maximus turpis, a consequat turpis bibendum sit amet. Nam vitae dui nec velit hendrerit faucibus. Vivamus nunc diam, porta tristique augue nec, dignissim venenatis felis. Proin mattis id risus in feugiat. Etiam cursus faucibus nisi. In in nisi ullamcorper, convallis lectus et, ornare nulla. Cras tristique nulla eros, non maximus odio imperdiet eu. Nullam egestas dignissim est, et fringilla odio pretium eleifend. Nullam tincidunt sapien fermentum, rhoncus risus ac, ullamcorper libero. Vestibulum bibendum molestie dui nec tincidunt. Mauris tempus, orci ut congue vulputate, erat orci aliquam orci, sed eleifend orci dui sed tellus. Pellentesque pellentesque massa vulputate urna pretium, consectetur pulvinar orci pulvinar.
        
        Donec aliquet imperdiet ex, et tincidunt risus convallis eget. Etiam eu fermentum lectus, molestie eleifend nisi. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam dignissim, erat vitae congue molestie, ante urna sagittis est, et sagittis lacus risus vitae est. Sed elementum ipsum et pellentesque dignissim. Sed vehicula feugiat pretium. Donec ex lacus, dictum faucibus lectus sit amet, tempus hendrerit ante. Ut sollicitudin sodales metus, at placerat risus viverra ut.
        
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vestibulum metus sit amet urna lobortis sollicitudin. Nulla mattis purus porta lorem tempor, a cursus tellus facilisis. Aliquam pretium nibh vitae elit placerat vestibulum. Duis felis ipsum, consectetur id pellentesque in, porta sit amet sapien. Ut tristique enim sem, laoreet bibendum nisl fermentum vitae. Ut aliquet sem ac lorem malesuada sodales. Fusce iaculis ipsum ex, in mollis dolor dapibus sit amet. In convallis felis in orci fermentum gravida a vel orci. Sed tincidunt porta nibh sit amet varius. Donec et odio eget odio tempus auctor ac eget ex.
        
        Duis finibus vestibulum finibus. Nunc lobortis lacus ut libero mattis tempor. Nulla a nunc at nisl elementum congue. Nunc eu consectetur mauris. Etiam non placerat massa. Etiam eu urna in metus tempus molestie sed eget diam. Nunc sem velit, elementum sit amet fringilla in, dictum sit amet sem. Quisque convallis faucibus purus dignissim dictum. Sed semper, mi vel accumsan sollicitudin, massa massa pellentesque justo, eget auctor sapien enim ac elit.
        
        Nullam turpis augue, lacinia ut libero ac, rhoncus bibendum ligula. Mauris ullamcorper maximus turpis, a consequat turpis bibendum sit amet. Nam vitae dui nec velit hendrerit faucibus. Vivamus nunc diam, porta tristique augue nec, dignissim venenatis felis. Proin mattis id risus in feugiat. Etiam cursus faucibus nisi. In in nisi ullamcorper, convallis lectus et, ornare nulla. Cras tristique nulla eros, non maximus odio imperdiet eu. Nullam egestas dignissim est, et fringilla odio pretium eleifend. Nullam tincidunt sapien fermentum, rhoncus risus ac, ullamcorper libero.
      </p>
    </div>
    <div class="content-block">
      <h3>Example Section II</h3>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vestibulum metus sit amet urna lobortis sollicitudin. Nulla mattis purus porta lorem tempor, a cursus tellus facilisis. Aliquam pretium nibh vitae elit placerat vestibulum. Duis felis ipsum, consectetur id pellentesque in, porta sit amet sapien. Ut tristique enim sem, laoreet bibendum nisl fermentum vitae. Ut aliquet sem ac lorem malesuada sodales. Fusce iaculis ipsum ex, in mollis dolor dapibus sit amet. In convallis felis in orci fermentum gravida a vel orci. Sed tincidunt porta nibh sit amet varius. Donec et odio eget odio tempus auctor ac eget ex.
        
        Pellentesque vitae augue sed purus dictum ultricies at eu neque. Nullam ut mauris a purus tristique euismod. Sed elementum, leo id placerat congue, leo tellus pharetra orci, eget ultricies odio quam sit amet ipsum. Praesent feugiat, lorem at commodo egestas, felis ligula pharetra sapien, in placerat mauris nisi aliquet tortor. Quisque nibh lectus, laoreet vel mollis a, tincidunt vel ipsum. Sed blandit vehicula sollicitudin. Donec et sapien justo. Ut fermentum ipsum imperdiet diam condimentum, eget varius sapien dictum. Sed sed elit egestas libero maximus finibus eu eget massa.
      </p>
    </div>
    <footer>
      This is the text that goes at the bottom of every page.
    </footer>
  </body>
</html>

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

— brittenb
स्रोत

1

इसके लिए धन्यवाद, मैं केवल यह चाहता हूं कि उत्तर को आसान बनाने के लिए एक नमूना HTML दस्तावेज़ था।

— बजे एरिक किगती

2

@EricKigathi नोटेड मैं पूरी कोशिश करूँगा कि इस सप्ताह के अंत तक पहुँच जाऊँ और अपना उत्तर संपादित कर सकूँ।

— ब्रेटनब

2

@EricKigathi ने मेरे सप्ताहांत की समय-सीमा को याद किया, लेकिन मैंने HTML कोड का उदाहरण जोड़ दिया है। उम्मीद है की वो मदद करदे!

— brittenb

धन्यवाद @brittenb - बहुत सराहना की, आप समय सीमा को याद करने के लिए माफ कर रहे हैं; )

— एरिक किगाथी

3

शीर्ष लेख के लिए दूसरे पृष्ठ के लिए काम नहीं करते। अभी भी ओवरलैप

— फी एक्सयू - एमएसएफटी

17

मैं एक समाधान के लिए वर्षों से खोज कर रहा हूं और इस पोस्ट को पाया कि कैसे एक पाद लेख को प्रिंट किया जाए जो पृष्ठ सामग्री को ओवरलैप किए बिना कई पृष्ठों पर काम करता है।

मेरी आवश्यकता IE8 थी, अब तक मैंने पाया है कि यह क्रोम में काम नहीं करता है। [ अद्यतन ] 1 मार्च 2018 तक, यह क्रोम में भी काम करता है

यह उदाहरण css शैली को सेट करके तालिकाओं और tfoot तत्व का उपयोग करता है:

tfoot {display: table-footer-group;}

— rweavere
स्रोत

2

यह सभी ब्राउज़रों में और एस्प में काम करता है (जिसमें पेज फुटर्स के साथ कुछ पागल मुद्दा है) इस का उपयोग करें।

— डीडोल्फ जूल

17

@ डॉल्फल्फ पहली टिप्पणी मुझे एक बड़ी उम्मीद है। और तुम मुझे उसके बाद एक वाक्य में नष्ट कर दो।

— C0ZEN

मुझे वास्तव में क्रोम में यह काम मिला है। मेरे पास लिनक्स आधारित क्रोमियम के बहुत पुराने संस्करण में काम नहीं था, लेकिन क्रोम ने बहुत अच्छा काम किया।

— njfife

2019 तक यह क्रोम में काम करता है!

— ओलेग

13

जादू का समाधान वास्तव में हर चीज को एकल तालिका में डाल रहा है।

थ्रेड : यह दोहराया हेडर के लिए है।
tfoot : दोहराया पाद।
tbody : सामग्री।

और एक एकल ट्रे, td बनायें और प्रत्येक वस्तु को div में रखें

कोड ::

<table class="report-container">
   <thead class="report-header">
     <tr>
        <th class="report-header-cell">
           <div class="header-info">
            ...
           </div>
         </th>
      </tr>
    </thead>
    <tfoot class="report-footer">
      <tr>
         <td class="report-footer-cell">
           <div class="footer-info">
           ...
           </div>
          </td>
      </tr>
    </tfoot>
    <tbody class="report-content">
      <tr>
         <td class="report-content-cell">
            <div class="main">
            ...
            </div>
          </td>
       </tr>
     </tbody>
</table>

table.report-container {
    page-break-after:always;
}
thead.report-header {
    display:table-header-group;
}
tfoot.report-footer {
    display:table-footer-group;
}

अतिरिक्त : कई पृष्ठों के साथ अतिव्यापी को रोकने के लिए। पसंद:

<div class="main">
    <div class="article">
        ...
  </div>
    <div class="article">
        ...
  </div>
    <div class="article">
        ...
  </div>
  ...
  ...
  ...
</div>

जिसके परिणामस्वरूप अतिप्रवाह होता है जो पृष्ठ के भीतर हेडर के साथ चीजों को ओवरलैप करेगा।

इसलिए >> page-break-inside: avoid !important;इस वर्ग के साथ उपयोग करें article।

table.report-container div.article {
    page-break-inside: avoid;
}

बहुत आसान है, आशा है कि यह आपको सबसे अच्छा परिणाम देगा जो आप चाहते हैं।

सादर। ;)

स्रोत ।।

— बिस्मार्ट मुहम्मद
स्रोत

सबसे अच्छा समाधान यहाँ। कुछ नोट: Flexbox कुछ अप्रत्याशित व्यवहार का कारण हो सकता है। यदि आप चाहते हैं कि lsat पृष्ठ पर पाद लेख नीचे हो तो आपको उस समाधान और समाधान की आवश्यकता होगी जो @Infotekka से संयुक्त है।

— आर्सेनी- II

11

से इस सवाल - एक प्रिंट केवल स्टाइलशीट के लिए निम्न शैलियों जोड़ें। यह समाधान IE और फ़ायरफ़ॉक्स में काम करेगा, लेकिन क्रोम में नहीं (संस्करण 21 के अनुसार):

#header {
  display: table-header-group;
}

#main {
  display: table-row-group;
}

#footer {
  display: table-footer-group;
}

— Blazemonger
स्रोत

1

मैंने इस समाधान को केवल एक काम कर पाया है। सभी ब्राउज़रों का परीक्षण नहीं किया गया है, लेकिन यह फ़ायरफ़ॉक्स में काम करता है!

— प्रिमोज़ रोम

2

2017 और अभी भी क्रोम में काम नहीं करता है! लेकिन फ़ायरफ़ॉक्स में काम करता है

— मेहदी देघानी

@ मेहेदीदेघानी: मेरी बुर .. टिप्पणी को

— हटाकर

10

CSS में शैलियों को परिभाषित करने के लिए पृष्ठ विराम का उपयोग करें :

@media all
  {
  #page-one, .footer, .page-break { display:none; }
  }

@media print
  {
  #page-one, .footer, .page-break   
    { 
    display: block;
    color:red; 
    font-family:Arial; 
    font-size: 16px; 
    text-transform: uppercase; 
    }
  .page-break
    {
    page-break-before:always;
    } 
}

फिर उपयुक्त स्थानों पर दस्तावेज़ में मार्कअप जोड़ें:

<h2 id="page-one">unclassified</h2>
<!-- content block -->
<h2 class="footer">unclassified</h2>
<h2 class="page-break">unclassified</h2>
<!-- content block -->
<h2 class="footer">unclassified</h2>
<h2 class="page-break">unclassified</h2>
<!-- content block -->
<h2 class="footer">unclassified</h2>
<h2 class="page-break">unclassified</h2>
<!-- content block -->
<h2 class="footer">unclassified</h2>
<h2 class="page-break">unclassified</h2>

संदर्भ

— पॉल स्वेट
स्रोत

32

यह प्रत्येक पृष्ठ पर शीर्ष लेख और पाद लेख नहीं छापता है। यह सर्वश्रेष्ठ अनुमान के साथ कई "पृष्ठ" निर्दिष्ट करता है। यदि आप अपने दस्तावेज़ की ऊँचाई (पृष्ठों की संख्या) नहीं जानते हैं, तो यह बेकार है।

— रेनबा

@्रेनबाबाif the document was printed onto 5 pages

— पॉल स्वेट्टे

4

यह सिर्फ एक उदाहरण था। अपने एएनएस को ठीक से निर्देशित करने के लिए उपयोग नहीं किया जाना चाहिए .. वर्कअराउंड।

— igorsantos07

@ igorsantos07 का shouldमतलब यह नहीं है don't। If(सिर्फ एक उदाहरण) शब्द if(सिर्फ एक उदाहरण) ओपी द्वारा प्रयोग किया जाता है, और if(सिर्फ एक उदाहरण) ओपी अब सक्रिय नहीं है, क्या एक विशिष्ट उत्तर if(सिर्फ एक उदाहरण) प्रदान करना बेहतर है, पहले से ही सामान्य उत्तर हैं और if(सिर्फ एक उदाहरण) प्रश्न में भाषाओं (HTML / CSS) और विनिर्देशों को अप्रत्यक्ष से बचने और प्रलेखन को सरल बनाने के लिए डिज़ाइन किया गया है ? (सिर्फ एक उदाहरण) तो, क्यों? नहीं तो क्यों नहीं? If

— बजे पॉल स्वेट

5

मैंने tfoot & css नियमों के संयोजन में इस निरर्थक लड़ाई को लड़ने की कोशिश की, लेकिन इसने केवल Firefox पर काम किया :( सादा css का उपयोग करते समय, सामग्री पाद लेख पर बहती है। tfoot का उपयोग करते समय, अंतिम पृष्ठ पर पाद लेख तल पर अच्छी तरह से नहीं रहता है। इसका कारण यह है कि टेबल फूटर्स टेबल के लिए होते हैं, भौतिक पृष्ठ नहीं। Chrome 16, ओपेरा 11, फ़ायरफ़ॉक्स 3 और 6 और IE6 पर परीक्षण किया जाता है।

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Header & Footer test</title>

<style>

  @media screen {
    div#footer_wrapper {
      display: none;
    }
  }

  @media print {
    tfoot { visibility: hidden; }

    div#footer_wrapper {
      margin: 0px 2px 0px 7px;
      position: fixed;
      bottom: 0;
    }

    div#footer_content {
      font-weight: bold;
    }
  }

</style>
</head>

<body>

<div id="footer_wrapper">
  <div id="footer_content">
    Total 4923
  </div>
</div>


<TABLE CELLPADDING=6>

<THEAD>
<TR> <TH>Weekday</TH> <TH>Date</TH> <TH>Manager</TH> <TH>Qty</TH> </TR>
</THEAD>

<TBODY>
<TR> <TD>Mon</TD> <TD>09/11</TD> <TD>Kelsey</TD>  <TD>639</TD>  </TR>
<TR> <TD>Tue</TD> <TD>09/12</TD> <TD>Lindsey</TD> <TD>596</TD>  </TR>
<TR> <TD>Wed</TD> <TD>09/13</TD> <TD>Randy</TD>   <TD>1135</TD> </TR>
<TR> <TD>Thu</TD> <TD>09/14</TD> <TD>Susan</TD>   <TD>1002</TD> </TR>
<TR> <TD>Fri</TD> <TD>09/15</TD> <TD>Randy</TD>   <TD>908</TD>  </TR>
<TR> <TD>Sat</TD> <TD>09/16</TD> <TD>Lindsey</TD> <TD>371</TD>  </TR>
<TR> <TD>Sun</TD> <TD>09/17</TD> <TD>Susan</TD>   <TD>272</TD>  </TR>
<TR> <TD>Mon</TD> <TD>09/11</TD> <TD>Kelsey</TD>  <TD>639</TD>  </TR>
<TR> <TD>Tue</TD> <TD>09/12</TD> <TD>Lindsey</TD> <TD>596</TD>  </TR>
<TR> <TD>Wed</TD> <TD>09/13</TD> <TD>Randy</TD>   <TD>1135</TD> </TR>
<TR> <TD>Thu</TD> <TD>09/14</TD> <TD>Susan</TD>   <TD>1002</TD> </TR>
<TR> <TD>Fri</TD> <TD>09/15</TD> <TD>Randy</TD>   <TD>908</TD>  </TR>
<TR> <TD>Sat</TD> <TD>09/16</TD> <TD>Lindsey</TD> <TD>371</TD>  </TR>
<TR> <TD>Sun</TD> <TD>09/17</TD> <TD>Susan</TD>   <TD>272</TD>  </TR>
<TR> <TD>Mon</TD> <TD>09/11</TD> <TD>Kelsey</TD>  <TD>639</TD>  </TR>
<TR> <TD>Tue</TD> <TD>09/12</TD> <TD>Lindsey</TD> <TD>596</TD>  </TR>
<TR> <TD>Wed</TD> <TD>09/13</TD> <TD>Randy</TD>   <TD>1135</TD> </TR>
<TR> <TD>Thu</TD> <TD>09/14</TD> <TD>Susan</TD>   <TD>1002</TD> </TR>
<TR> <TD>Fri</TD> <TD>09/15</TD> <TD>Randy</TD>   <TD>908</TD>  </TR>
<TR> <TD>Sat</TD> <TD>09/16</TD> <TD>Lindsey</TD> <TD>371</TD>  </TR>
<TR> <TD>Sun</TD> <TD>09/17</TD> <TD>Susan</TD>   <TD>272</TD>  </TR>
<TR> <TD>Mon</TD> <TD>09/11</TD> <TD>Kelsey</TD>  <TD>639</TD>  </TR>
<TR> <TD>Tue</TD> <TD>09/12</TD> <TD>Lindsey</TD> <TD>596</TD>  </TR>
<TR> <TD>Wed</TD> <TD>09/13</TD> <TD>Randy</TD>   <TD>1135</TD> </TR>
<TR> <TD>Thu</TD> <TD>09/14</TD> <TD>Susan</TD>   <TD>1002</TD> </TR>
<TR> <TD>Fri</TD> <TD>09/15</TD> <TD>Randy</TD>   <TD>908</TD>  </TR>
<TR> <TD>Sat</TD> <TD>09/16</TD> <TD>Lindsey</TD> <TD>371</TD>  </TR>
<TR> <TD>Sun</TD> <TD>09/17</TD> <TD>Susan</TD>   <TD>272</TD>  </TR>
<TR> <TD>Mon</TD> <TD>09/11</TD> <TD>Kelsey</TD>  <TD>639</TD>  </TR>
<TR> <TD>Tue</TD> <TD>09/12</TD> <TD>Lindsey</TD> <TD>596</TD>  </TR>
<TR> <TD>Wed</TD> <TD>09/13</TD> <TD>Randy</TD>   <TD>1135</TD> </TR>
<TR> <TD>Thu</TD> <TD>09/14</TD> <TD>Susan</TD>   <TD>1002</TD> </TR>
<TR> <TD>Fri</TD> <TD>09/15</TD> <TD>Randy</TD>   <TD>908</TD>  </TR>
<TR> <TD>Sat</TD> <TD>09/16</TD> <TD>Lindsey</TD> <TD>371</TD>  </TR>
<TR> <TD>Sun</TD> <TD>09/17</TD> <TD>Susan</TD>   <TD>272</TD>  </TR>
<TR> <TD>Mon</TD> <TD>09/11</TD> <TD>Kelsey</TD>  <TD>639</TD>  </TR>
<TR> <TD>Tue</TD> <TD>09/12</TD> <TD>Lindsey</TD> <TD>596</TD>  </TR>
<TR> <TD>Wed</TD> <TD>09/13</TD> <TD>Randy</TD>   <TD>1135</TD> </TR>
<TR> <TD>Thu</TD> <TD>09/14</TD> <TD>Susan</TD>   <TD>1002</TD> </TR>
<TR> <TD>Fri</TD> <TD>09/15</TD> <TD>Randy</TD>   <TD>908</TD>  </TR>
<TR> <TD>Sat</TD> <TD>09/16</TD> <TD>Lindsey</TD> <TD>371</TD>  </TR>
<TR> <TD>Sun</TD> <TD>09/17</TD> <TD>Susan</TD>   <TD>272</TD>  </TR>
<TR> <TD>Mon</TD> <TD>09/11</TD> <TD>Kelsey</TD>  <TD>639</TD>  </TR>
<TR> <TD>Tue</TD> <TD>09/12</TD> <TD>Lindsey</TD> <TD>596</TD>  </TR>
<TR> <TD>Wed</TD> <TD>09/13</TD> <TD>Randy</TD>   <TD>1135</TD> </TR>
<TR> <TD>Thu</TD> <TD>09/14</TD> <TD>Susan</TD>   <TD>1002</TD> </TR>
<TR> <TD>Fri</TD> <TD>09/15</TD> <TD>Randy</TD>   <TD>908</TD>  </TR>
<TR> <TD>Sat</TD> <TD>09/16</TD> <TD>Lindsey</TD> <TD>371</TD>  </TR>
<TR> <TD>Sun</TD> <TD>09/17</TD> <TD>Susan</TD>   <TD>272</TD>  </TR>
</TBODY>

<TFOOT id="table_footer">
<TR> <TH ALIGN=LEFT COLSPAN=3>Total</TH> <TH>4923</TH> </TR>
</TFOOT>

</TABLE>

</body>
</html>

— jous
स्रोत

4

एक दृष्टिकोण जो केवल प्रत्येक पृष्ठ पर हेडर जोड़ने के लिए काम करता है, अपनी सामग्री को एक में लपेटने के लिए है <table>और फिर अपनी हेडर सामग्री को <thead>टैग में और अपनी सामग्री को <tbody>टैग में रखें, जैसे:

<table>
  <thead>
    <tr>
      <th>This content appears on every page</th>
    </tr>
   </thead>
   <tbody>
     <tr>
       <td>Put all your content here, it can span multiple pages and your header will show up at the top of each page</td>
     </tr>
   </tbody>
 </table>

यह क्रोम में काम करता है, अन्य ब्राउज़रों के बारे में 100% निश्चित नहीं है।

— दाना वुडमैन
स्रोत

1

यह तब तक काम करता है जब तक कि हमारे thead और tfoot में कई <tr> पंक्तियाँ नहीं होतीं, ऐसा लगता है जैसे thead और tfoot में एक अधिकतम ऊँचाई है, मेरे मामले में मेरे पास thead में 9 <tr> पंक्तियाँ थीं, जब मैंने इसे घटाकर 3 कर दिया था या 5 यह काम करता है

— सुंदर प्रभू

यह एक साफ चाल है! थीड एक आकर्षण की तरह काम करता है, लेकिन tfoot नहीं करता है। यह कैसे काम करना है पर कोई विचार?

— इरिकोस

Tfoot ब्राउज़र में काम करता है, लेकिन MS शब्द में नहीं है। दोनों में थीड काम करता है।

— आइरिकोस

3

यदि आप javascipt का उपयोग कर सकते हैं, तो उपलब्ध स्थान के आधार पर तत्वों को रखने के लिए javascript का उपयोग करके सामग्री को संभालने के लिए क्लाइंट हैंडल रखें।

आप निश्चित आकार के ब्लॉक में अपनी सामग्री को गतिशील रूप से बिछाने और रेंडरिंग रूटीन के हिस्से के रूप में अपने हेडर और फ़ुटर को स्थिति में लाने के लिए jquery के कॉलमिज़र प्लगइन का उपयोग कर सकते हैं। http://welcome.totheinter.net/columnizer-jquery-plugin/

उदाहरण 10 देखें http://welcome.totheinter.net/autocolumn/sample10.html

यदि ओएस में सक्षम है तो ब्राउज़र अभी भी अपने स्वयं के हेडर या फुटर को जोड़ देगा। प्लेटफार्मों और ब्राउज़रों में लगातार लेआउट को सशर्त सीएसएस की आवश्यकता होगी।

— sparkalow
स्रोत

3

प्रदान किया गया डेमो भी काम नहीं करता है (पृष्ठ एक-दूसरे से अलग नहीं होते हैं, आदि), अधिक सार्वभौमिक सामग्री के साथ अकेले रहने दें।

— रेनबा १ba

1

मुझे स्पष्ट करना चाहिए था। प्रदान किए गए लिंक कंटेनरों में सामग्री बिछाने के लिए एक जावास्क्रिप्ट लाइब्रेरी के उदाहरण हैं और मुद्रण के लिए सेटअप नहीं है। यह लिंक निर्दिष्ट सीमाओं के भीतर जेएस से लेआउट सामग्री का उपयोग करने का एक उदाहरण था। मैं डेटाबेस सामग्री से रसोई की किताब बनाने के लिए wttmltopdf के साथ एक प्रतिपादन इंजन के रूप में js का उपयोग किया है।

— चमक

सवाल छपाई का है।

— ग्रेग ब्लास

2

मैं हैरान और दुखी हूं कि क्रोम में इतनी भयानक सीएसएस प्रिंट समर्थन है।

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

CSS प्रिंट इसे हल नहीं कर सकता है, कम से कम आज घटिया ब्राउज़र समर्थन के साथ नहीं। लेकिन प्रिंट के बाहर कदम रखते हुए, CSS3 बहुत भारी उठाने का काम कर सकता है:

https://jsfiddle.net/b9chris/moctxd2a/29/

<div class=page>
  <header></header>
  <div class=content>Content</div>
  <footer></footer>
</div>

एससीएसएस:

body {
  @media screen {
    width: 7.5in;
    margin: 0 auto;
  }
}

div.page {
  display: flex;
  height: 10in;    
  flex-flow: column nowrap;
  justify-content: space-between;
  align-content: stretch;
}

div.content {
  flex-grow: 1;
}

@media print {
  @page {
    size: letter;  // US 8.5in x 11in
    margin: .5in;
  }

  footer {
    page-break-after: always;
  }
}

उदाहरण में थोड़ा और कोड है, जिसमें कुछ कैट इप्सम भी शामिल हैं; लेकिन उपयोग में आने वाले जे एस यह प्रदर्शित करने के लिए है कि शीर्ष लेख / पाद लेख कितना टूटने के बिना भिन्न हो सकता है। कुंजी वास्तव में सीएसएस फ्लेक्सबॉक्स से एक कॉलम-बॉटम-स्टिकिंग ट्रिक लेने के लिए है और फिर इसे ज्ञात, निश्चित ऊंचाई के एक पृष्ठ पर लागू करें - इस मामले में, यूएस पत्र-आकार के पेपर का 8.5 "x11" टुकड़ा, साथ ।5। "मार्जिन छोड़ने width: 7.5inऔर height: 10inबिल्कुल। एक बार जब सीएसएस फ्लेक्स कंटेनर को इसके सटीक आयाम बताए जाते हैं ()div.page ) , तो हेडर और फुटर को प्राप्त करना आसान होता है, जिस तरह से वे पारंपरिक टाइपोग्राफी में काम करते हैं।

जो कुछ बचा है वह पृष्ठ की सामग्री को प्रवाहित कर रहा है जब पाद, उदाहरण के लिए, 8 फुटनोट तक नहीं बढ़ता है। 3. मेरे मामले में सामग्री पर्याप्त रूप से तय हो गई है कि मुझे इसके बारे में चिंता करने की आवश्यकता नहीं है, लेकिन मुझे यकीन है कि एक रास्ता है इसे करने के लिए। एक दृष्टिकोण जो मन में छलांग लगाता है, वह हैडर और फुटर को 100% चौड़ाई की फ्लोट में बदलना, फिर उन्हें जावास्क्रिप्ट के साथ स्थिति देना। ब्राउज़र स्वचालित रूप से आपके लिए नियमित सामग्री प्रवाह में रुकावटों को संभाल लेगा।

— क्रिस मोसचिनी
स्रोत

0

क्या यह कुछ आप केवल प्रिंट करना चाहते हैं? आप इसे अपनी साइट के हर पृष्ठ पर जोड़ सकते हैं और टैग को केवल-प्रिंट मीडिया के रूप में परिभाषित करने के लिए CSS का उपयोग कर सकते हैं।

एक उदाहरण के रूप में, यह एक उदाहरण हैडर हो सकता है:

<span class="printspan">UNCLASSIFIED</span>

और अपने CSS में, कुछ इस तरह से करें:

<style type="text/css" media="screen">
    .printspan
    {
        display: none;
    }
</style>
<style type="text/css" media="print">
    .printspan
    {
        display: inline;
        font-family: Arial, sans-serif;
        font-size: 16 pt;
        color: red;
    }
</style>

अंत में, प्रत्येक पृष्ठ पर हेडर / फ़ूटर को शामिल करने के लिए आप सर्वर-साइड का उपयोग कर सकते हैं या यदि आपके पास PHP या ASP के साथ कोई पेज उत्पन्न हो रहा है तो आप इसे केवल एक सामान्य फ़ाइल में कोड कर सकते हैं।

संपादित करें:

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

मैं इसे यहाँ छोड़ रहा हूँ अगर यह मददगार हो तो भी।

— JYelton
स्रोत

4

दृश्यता के बजाय प्रदर्शन का उपयोग करने के लिए +1 - दृश्यता: छिपी हुई पत्तियां आरक्षित स्थान, जबकि प्रदर्शन: कोई भी व्हाट्सएप को ध्वस्त नहीं करता है, कागज बचाता है और ग्रह पृथ्वी को लंबे समय तक जीवित रखता है।

— फेंटन

3

-1: हालांकि एक प्रिंट स्टाइल शीट का एक अच्छा उदाहरण है, यह उस मुद्दे से नहीं निपटता है जब सामग्री किसी पृष्ठ को ओवरफ्लो करती है .. जैसा कि, यह केवल अंतिम पृष्ठ पर पाद दिखाएगा।

— NotMe

0

यदि आप Asp.net रेजर इंजन या कोणीय जैसे टेम्पलेट इंजन का उपयोग कर रहे हैं, तो मुझे लगता है कि आपको अपने पृष्ठ को फिर से बनाना होगा और पृष्ठ को कई पृष्ठों में विभाजित करना होगा और फिर आप प्रत्येक पृष्ठ को स्वतंत्र रूप से चिह्नित कर सकते हैं और विषय पर हेडर और पाद लेख डाल सकते हैं। एक उदाहरण के रूप में bellow हो सकता है:

@page {
  size: A4;  
   margin: .9cm;
}


@media print {

   body.print-paper-a4 {
    width: 210mm;
    height: 297mm;
  }

   body {
       background: white;
       margin: 0;
       padding: 0;
   }

   .print-stage,
   .no-print {
       display: none;
   }


   body.print-paper.a4 .print-paper {
      width: 210mm;
        height: 297mm;
    }

   .print-paper {
       page-break-after: always;
       margin: 0;
       padding: .8cm;
       border:none;
       overflow: hidden;
   }

}





.print-papers {
    display: block;
    z-index: 2000;
    margin: auto;

}


body.print-paper-a4 .print-paper {
    width: 21cm;
    height:27cm;
}


.print-paper {
    margin: auto;
    background: white;
    border: 1px dotted black;
    box-sizing: border-box;
    margin: 1cm auto;
    padding: .8cm;
       overflow: hidden;   
}


body.print-mode .no-print-preview {
    display: none;
}

body.print-mode .print-preview {
    display: block;
}

<body class="print-mode print-paper-a4">
        
        <div class="print-papers print-preview">
            <div class="print-paper">
                <div style="font-size: 5cm">
                    HELLO
                </div>

            </div>
            <div class="print-paper">
              <div class="page-header">
                </div>
              
              
            </div>
            <div class="print-paper">
                
                

            </div>            
        </div>
  </body>

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

— pixparker
स्रोत

0

मुझे एक उपाय मिला। मूल विचार एक तालिका बनाना है और थ्रेड सेक्शन में हैडर के डेटा को tr में और css बल द्वारा उस tr को केवल स्क्रीन में नहीं प्रिंट करने के लिए दिखाना है, तो आपके सामान्य हेडर को केवल स्क्रीन में प्रिंट में नहीं दिखाने के लिए बाध्य होना चाहिए। कई पृष्ठों पर काम करने वाले 100% प्रिंट करते हैं। नमूना कोड यहाँ है

<style> 
    @media screen {
        .only_print{
            display:none;
        }
    }
    @media print {
        .no-print {
            display: none !important;
        }
    }
    TABLE{border-collapse: collapse;}
    TH, TD {border:1px solid grey;}
</style>
<div class="no-print">  <!-- This is header for screen and will not be printed -->
    <div>COMPANY NAME FOR SCREEN</div>
    <div>DESCRIPTION FOR SCREEN</div>
</div>

<table>
    <thead>
        <tr class="only_print"> <!-- This is header for print and will not be shown on screen -->
            <td colspan="100" style="border: 0px;">
                <div>COMPANY NAME FOR PRINT</div>
                <div>DESCRIPTION FOR PRINT</div>
            </td>
        </tr>
        <!-- From here Actual Data of table start -->
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1-1</td>
            <td>1-2</td>
            <td>1-3</td>
        </tr>
        <tr>
            <td>2-1</td>
            <td>2-2</td>
            <td>2-3</td>
        </tr>
    </tbody>
</table>

— अज़ शीतल
स्रोत

0

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

सीएसएस

<style>
  @page {
    margin: 10mm;
  }

  body {
    font: 9pt sans-serif;
    line-height: 1.3;

    /* Avoid fixed header and footer to overlap page content */
    margin-top: 100px;
    margin-bottom: 50px;
  }

  #header {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100px;
    /* For testing */
    background: yellow; 
    opacity: 0.5;
  }

  #footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 50px;
    font-size: 6pt;
    color: #777;
    /* For testing */
    background: red; 
    opacity: 0.5;
  }

  /* Print progressive page numbers */
  .page-number:before {
    /* counter-increment: page; */
    content: "Pagina " counter(page);
  }

</style>

एचटीएमएल

<body>

  <header id="header">Header</header>

  <footer id="footer">footer</footer>

  <div id="content">
    Here your long long content...
    <p style="page-break-inside: avoid;">This text will not be broken between the pages</p>
  </div>

</body>

— फ्रेड के
स्रोत

-2

कुछ पोस्ट के आधार पर, मुझे लगता है कि position: fixedमेरे लिए काम करता है।

body {
  background: #eaeaed;
  -webkit-print-color-adjust: exact;
}

.my-footer {
  background: #2db34a;
  bottom: 0;
  left: 0;
  position: fixed;
  right: 0;
}

.my-header {
  background: red;
  top: 0;
  left: 0;
  position: fixed;
  right: 0;
}

<html>

<head>
  <meta charset=utf-8 />
  <title>Header & Footer</title>

</head>

<body>
  <div>
    <div class="my-header">Fixed Header</div>
    <div class="my-footer">Fixed Footer</div>
    <table>
      <thead>
        <tr>
          <th>TH 1</th>
          <th>TH 2</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
      </tbody>
    </table>
  </div>
</body>

</html>

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

क्रोम में Ctrl + P दबाएं प्रत्येक पृष्ठ पर शीर्षक और पाद लेख देखें। आशा है ये मदद करेगा

— जस्टिन पटेल
स्रोत

12

हां, हेडर और फूटर हर पेज पर प्रिंट किए जाते हैं लेकिन वे पेज की सामग्री को ओवरलैप कर देते हैं।

— टोनी