How to use HTML to print header and footer on every printed page of a document?

前端 未结 20 1374
迷失自我
迷失自我 2020-11-21 16:51

Is it possible to print HTML pages with custom headers and footers on each printed page?

I\'d like to add the word \"UNCLASSIFIED\" in Red, Arial, size 16pt to the t

相关标签:
20条回答
  • 2020-11-21 16:57

    I believe the correct answer is that HTML 5 and CSS3 have no support for printing page header and footers in print media.

    And while you might be able to simulate it with:

    • tables
    • fixed position blocks

    they each have bugs that prevent them from being the ideal general solution.

    0 讨论(0)
  • 2020-11-21 16:57

    I found one solution. The basic idea is to make a table and in thead section place the data of header in tr and by css force to show that tr only in print not in screen then your normal header should be force to show only in screen not in print. 100% working on many pages print. sample code is here

    <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 讨论(0)
  • 2020-11-21 16:59

    I just spent the better half of my day coming up with a solution that actually worked for me and thought I would share what I did. The problem with the solutions above that I was having was that all of my paragraph elements would overlap with the footer I wanted at the bottom of the page. In order to get around this, I used the following 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;
      }
    }
    

    The page-break-inside for p and content-block was crucial for me. Any time I have a p following an h*, I wrap them both in a div class = "content-block"> to ensure they stay together and don't break.

    I'm hoping that someone finds this useful because it took me about 3 hours to figure out (I'm also new to CSS/HTML, so there's that...)

    EDIT

    Per a request in the comments, I am adding an example HTML document. You'll want to copy this into an HTML file, open it, and then choose to print the page. The print preview should show this working. It worked in Firefox and IE on my end, but Chrome made the font small enough to fit on one page, so it didn't work there.

    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>

    0 讨论(0)
  • 2020-11-21 16:59

    I tried to fight this futile battle combining tfoot & css rules but it only worked on Firefox :(. When using plain css, the content flows over the footer. When using tfoot, the footer on the last page does not stay nicely on the bottom. This is because table footers are meant for tables, not physical pages. Tested on Chrome 16, Opera 11, Firefox 3 & 6 and 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>
    
    0 讨论(0)
  • 2020-11-21 17:00

    From this question -- add the following styles to a print-only stylesheet. This solution will work in IE and Firefox, but not in Chrome (as of version 21):

    #header {
      display: table-header-group;
    }
    
    #main {
      display: table-row-group;
    }
    
    #footer {
      display: table-footer-group;
    }
    
    0 讨论(0)
  • 2020-11-21 17:01

    Based on some post, i think position: fixed works for me.

    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>

    Press Ctrl+P in chrome see the header & footer text on each page. Hope it helps

    0 讨论(0)
提交回复
热议问题