1

I have the following attempted minimal reproducible HTML and CSS code:

https://codepen.io/EshaanGupta/pen/LYJbzqb

Objective : On a button press, I want print the table inside 'print-form' div.

<div class = "item item-content item-content-title print-form printDiv">

Problem : The background contents are spilling onto the print preview.

Sample Image:enter image description here

I tried adding position: fixed; in @media print .printDiv instead of position: absolute; but that duplicates the contents into multiple pages.

Proposed solution : How can I hide the rest of the contents and only print the table and its data?

<input type='submit' class='printfeedback' name='printfeedback' value='Print Feedback' onclick='window.print()'/>

Any help or suggestion is valued and appreciated. Feel free to add comments to improve this question and I will try to edit and incorporate them.

Thank you.

Eshaan Gupta
  • 614
  • 8
  • 25
  • _"How can I hide the rest of the contents and only print the table and its data?"_ - add a print stylesheet, that hides everything else. https://developer.mozilla.org/en-US/docs/Web/Guide/Printing – CBroe Feb 27 '23 at 07:28

1 Answers1

0
/* Hide everything except the div with ID "print-div" when printing */

@media print {
  body * {
    visibility: hidden;
  }
  #print-div, #print-div * {
    visibility: visible;
  }
  #print-div {
    position: absolute;
    left: 0;
    top: 0;
  }
}

Try using these properties like above.

Harish Patil
  • 71
  • 1
  • 13
  • Thanks for your response, your changes hides all the other contents, however the border of 'body' and the white space is still visible. I tried few combinations of 'hidden' but did not help, any suggestions here? The contents of the table are still spilling over. – Eshaan Gupta Feb 27 '23 at 08:44