2

I Have Problem with Headers And Footer on web page Which is Going to Print. My custom headers and footer should print on each page. Header is printing at top of page, that is fine, but footer is not printing at bottom of page if the content is less on page. footer is printing depends on content.

HERE MY CODE IS:-

<html>
  <head>
    <meta name="generator" content=
    "HTML Tidy for Windows (vers 14 February 2006), see www.w3.org">
    <link rel='stylesheet' type='text/css' href='print.css' media='print'>
    <title></title>
  </head>
  <body>
    <table border="0" align="center" width="100%">
      <thead>
        <tr>
          <th align="center" width="100%">
            <font size="5" color="black"><strong>HEADER HERE</strong></font>
          </th>
        </tr>
      </thead>
      <tfoot>
        <tr>
          <td align="center" width="100%">
            <font size="4" color="black"><strong>FOOTER HERE</strong></font>
          </td>
        </tr>
      </tfoot>
      <tbody height="100%">
        <tr>
          <td width="100%">
            CONTENT HERE
          </td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

MY CSS IS:-

.thead {
display: table-header-group;
}

.tfoot {
display: table-footer-group;
}

Can any one suggest me how to do it ? that would great help?

Jacob
  • 77,566
  • 24
  • 149
  • 228
Narendra nnvd
  • 413
  • 1
  • 5
  • 11
  • 1
    Please tell better question for this. It's not clear what you mean. – deceze Sep 08 '10 at 04:44
  • You should add your CSS to the question. – Jacob Sep 08 '10 at 05:10
  • 1
    Is your footer getting pushed to a second page when there is a lot of content? – Zac Sep 08 '10 at 05:29
  • yeah, the footer is printed on next page if content is less the footer print in below the content but my wish is the footer is not depend the content – Narendra nnvd Sep 08 '10 at 05:44
  • it should be footer is print bottom of the page please give me help – Narendra nnvd Sep 08 '10 at 05:46
  • What you're experiencing isn't necessarily wrong, but worse varies between browsers - header/footer printing isn't standardized yet. – Rudu Sep 08 '10 at 16:55
  • Please see the answer to this very similar question: [HTML Print Header & Footer][1] [1]: http://stackoverflow.com/questions/1360869/html-print-header-footer – Jason Feb 15 '12 at 21:36

2 Answers2

-1

This is the code i use. Note I am setting both html and body height to 100% (needed for Chrome and Safari). Tested and works fine in IE9, FF, Chrome.

@media print {
  html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
  }
  #footer {
    position: absolute;
    bottom: 0;
  }
}
tim
  • 2,530
  • 3
  • 26
  • 45
-1

Since you have a print.css, write (only in print.css):

thead {
    display: block;
    position: fixed;
    top: 0;
}

tfoot {
    display: block;
    position: fixed;
    bottom: 0;
}

Depending on how much height your thead and tfoot might occupy, use an appropriate margin-top and margin-bottom on the table to avoid any overlap that might occur.

Alex J
  • 527
  • 4
  • 8