如何在不将边距设置为 0 的情况下从 window.print() 中删除页眉和页脚？

Question

I have an HTML code with a Table that I want to print using window.print(). I need to remove the headers and footers (The ones that the browsers add automatically, I mean, URL, number of page, etc.) on every page, but I need to keep the margin with an specific size. This is my CSS:

@page { 
    size: auto;
    margin: 5cm 0 5cm 0;
}
body {
    margin:0;
    padding:0;
}

table { page-break-inside:auto }
tr    { page-break-inside:avoid; page-break-after:auto }
thead { display:table-header-group }
tfoot { display:table-footer-group }

I need to keep these 5cm because the company I'm working for is using previously letterheaded sheets. How can I remove these headers and footers without modifying my margin?

Answer 1

Just use the @media print query within your css. For example:

@media print {
  thead, tfoot {  
    display: none !important
  }
}

I would wish it could be that easy. I mean, the automatic headers and footers that the browser is creating, that contains the URL, the number of page and other useless (In my situation) data.

Ok, now, I got it. You can try this (should work on Chrome):

@media print {
  @page {
    size: auto;
    margin: 0mm;
  }

  /* in case @page {margin: 5cm 0 5cm 0;} doesn't work */
  body {
    padding-top: 5cm !important;
    padding-bottom: 5cm !important;
  }
}