Member Avatar for panjiasmara

I was asked this question month's ago to stackoverflow.com. is anyone here can solve this one ?

I have a fixed element ( for logo , slogan , ect ) and a dynamic table . i give the distance it with <body style="padding-top: 25mm;"> but only the first page that work , another page is not working ( the fixed element and dynamic table doesn't have distance ).

I have try @page{ padding: 50mm 0mm 50mm 0mm;} but padding didn't work. margin is work but that make the fixed element is croped ! ( when i used style="margin-top:-50mm; )

Page 1 : Link

Page 2 : Link

as you see <body style="padding-top: 25mm;"> only work for page 1.

how to give padding on page 2 ?

thanks

  • 2 Contributors
  • 2 Replies
  • 193 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by panjiasmara

Dani AI

Generated

Short summary and a practical fix for printing multi‑page tables (adds to and follows ’s observation). The root cause is paged‑media behavior: @page does not support padding (only margin, size, etc.), and browsers treat fixed elements and page boxes differently when paginating. (developer.mozilla.org)

Most reliable, cross‑browser approach: move the header (logo + slogan) into the table header so the browser can repeat it on every printed page. Put the header content inside <thead> (or make a print‑only wrapper and give it display: table-header-group), and ensure it is not position: fixed in print. Minimal pattern:

<table>
  <thead>
    <tr><th colspan="4">
      <div class="print-header">
        <!-- logo / slogan here -->
      </div>
    </th></tr>
  </thead>
  <tbody>
    <!-- dynamic rows -->
  </tbody>
</table>
@media print {
  thead { display: table-header-group; }
  tfoot { display: table-footer-group; }
  .print-header { position: static !important; } /* override fixed positioning */
}

Browsers will repeat thead during printing; this is the standard workaround. (stackoverflow.com)

Caveats and troubleshooting: very large headers may only appear on the first page (browsers typically repeat a header only if it fits in the printable area), so split tall header content into multiple rows or reduce its height. Also be aware that advanced @page margin‑box features and margin at‑rules have uneven browser support — Chrome/Chromium has more support than others. For pixel‑perfect, consistent multi‑page output (running headers/footers, exact margins) use a paged‑media PDF tool (PrinceXML, wkhtmltopdf, etc.). ()

Note: the live example linked in the thread could not be fetched here, so advice is based on the common browser print behaviors above.

Recommended Answers

All 2 Replies

Member Avatar for AleMonteiro

Panjiasmara, as defined at http://www.w3.org/TR/CSS2/page.html
the @page rule don't have a padding property, only margin and size.

If you really want that space, you'll have to use margin and fix the logo another way.

Member Avatar for panjiasmara

I was try your suggestion to add margin on the logo. But , nothing change.
I think because the div logo position is fixed.

PS : Well i forgot to upload the code. Then this the code :

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.