1

Problem with @media print

It contains a header, a section, and a footer. Why, when my table has many rows, can it not break and print on the next page in the section?

Code

@media print {
  @page {
    margin: 10px;
  }
  
  .header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 300px;
  }
  
  .footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 240px;
  }
  
  .section {
    margin-top: 300px;
    margin-bottom: 250px;
    padding-top: 10px;
    height: 580px;
  }
  
  .table-container {
    overflow-x: visible;
    max-height: 100%;
    page-break-inside: avoid;
  }
}
<!-- Header -->
<div class="header">
  <!-- Your header content here -->
</div>

<!-- Section -->
<div class="section">
  <div class="table-container">
    <table>
      <!-- Your table content here -->
    </table>
  </div>
</div>

<!-- Footer -->
<div class="footer">
  <!-- Your footer content here -->
</div>

Now, Result

wrong result

I want the result to be

  • Numbers 1-13 will be printed on the first page,
  • and numbers 14-17 will be printed on the second page.
rozsazoltan
  • 2,831
  • 2
  • 7
  • 20
Efendy zheng
  • 66
  • 5
  • It's hard to understand the question. I think what you are saying is you want the table to break if it doesn' fit in the "section" of one page and then continue on the next page in a new "section". I don't think that is possible but I am not sure. It would be helpful if you (a) removed images and replaced them with code, (b) showed us an example of what you want and how it currently looks like – apokryfos Aug 24 '23 at 05:20
  • @apokryfos . Yes. what i want is like that. I have edited my question, i am showing the result of my code now, and the result that i want. – Efendy zheng Aug 24 '23 at 06:17
  • Could you share a reproduction of the code that generates the result currently visible in the image? - [How to can insert your code block](https://meta.stackexchange.com/a/22189/1380314) – rozsazoltan Aug 24 '23 at 06:20
  • As I mentioned I don't think this will work with pure CSS. What I do for a similar problem is a complex way of using the [Chrome DevTool protocol](https://chromedevtools.github.io/devtools-protocol/tot/Page/#method-printToPDF) print to PDF method and put my fixed data in the "headerTemplate" and "footerTemplate" section and then open the resulting PDF in a new tab (where it can be printed) This forces the "table area" to stay inside the main page. (https://stackoverflow.com/questions/44575628/alter-the-default-header-footer-when-printing-to-pdf for more details on this) – apokryfos Aug 24 '23 at 15:20

0 Answers0