We Keep Coding

How to remove header and footer from window.print() without set margin to 0?

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?

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;
}
}

print media query not working on iOS(chrome, safari, mozilla)

I'm trying to figure why the #media print doesn't seem to work on the iOS, on android the functionality works fine. Basically I've made a functionality to hide the contents that aren't part of the print
body.printing *{display : none}
and only display the contents that will be printed
body.printing .print-me, body.printing .print-me > div{display : block}.
$('.print-modal').on('click', function() {
$('body').addClass('printing');
window.print();
$("body").removeClass("printing");
})
#media print {
/* Hide everything in the body when printing... */
body.printing * { display: none; }
/* ...except our special div. */
body.printing .print-me, body.printing .print-me > div { display: block; }
}
#media screen {
/* Hide the special layer from the screen. */
.print-me { display: none; }
}

Maybe the issue is, you are adding a class printing and removing the same class immediately. That's could be the reason.
Try changing the logic. You don't need to add a class for printing. Instead use print media query #media print to handle print logic.
$('.print-modal').on('click', function() {
window.print();
})
#media print {
/* Hide everything in the body when printing... */
body * { display: none; }
/* ...except our special div. */
body .print-me, body .print-me > div { display: block; }
}
#media screen {
/* Hide the special layer from the screen. */
.print-me { display: none; }
}

Disabling browser printing headers and footers while keeping margins, but also on page 2, 3, etc

When using the usual trick:
#media print {
#page { margin: 0; }
body { margin: 15mm 15mm 15mm 15mm; /* margin for the content */ }
}
to disable the browser's priting header/footer, it actually works on the first page of the document, but not on page 2, page 3, etc. which have a zero-margin (this is normal, because of margin: 0).
Of course we could change the margin-top for other pages, but then it would restore the browser printing header.
How to remove the browser's printing header/footer from CSS or JS, but have a 15mm plain white margin on all pages of the printed document?

<style type="text/css" media="print">
#page {
size: auto;
margin: 0;
}
</style>

On your css :
div.hidden {
visibility: hidden
}
HTML :
<div class="hidden">This is an header/footer</div>

force printer page with paper size b4 using javascript in asp.net

I want to setting the paper size when click button print.I using ie8 web browsers.Please tell me any solution for this my problem

See CSS3 documentation for following CSS3 solution
Go with CSS3 and change the dimensions of your rendered web page:
/* style sheet for "A4" printing */
#media print and (width: 21cm) and (height: 29.7cm) {
#page {
margin: 3cm;
}
}
/* style sheet for "letter" printing */
#media print and (width: 8.5in) and (height: 11in) {
#page {
margin: 1in;
}
}
/* A4 Landscape*/
#page {
size: A4 landscape;
margin: 10%;
}

Avoid loading new page after the print and next page should print from the remaining portion of last printed page - dot matrix printer

I am printing a page using a dot matrix printer by using javascript print() method and by use of #media print methods in css.
My print.css as follows:
#media print {
html, body {
font-family: 'Arial', 'Helvetica',sans-serif;
font-size: 15pt;
margin : 0px;
}
}
#page {
size: 22cm 10cm;
margin : 0px;
}
My printable detail is very small suppose two lines of data. But after printing
the printer skips the current printed page and feeding another page.
I want to avoid feeding next page and the next print should happen from the same page which is printed last.
I have tried:
#media print {
page-break-after: avoid;
}
But not working at all.
How can I do this?

Try the * selector css:
#media print {
* {
page-break-before: avoid;
page-break-after: avoid;
page-break-inside: avoid;
}
}

Try defining a page size something like
#page {
size: 21.59cm 13.97cm;
}
should work