Styling to Print

Hide or Show When Printing

I Wanted to show certain items and hide others when a user goes to print a web page

@media print {
    @page {
      size: portrait;
    }
    body * {
      visibility: hidden;
    }
    .printable, .printable * {
      visibility: visible;
    }
    .printable {
      position: absolute;
      left: 0;
      top: 0;
    }

    .noprint{
      display: none !important;
      visibility: hidden !important;
    }

    .hideTillprint{
      position: inherit;
    }
  }
use the !important option when things like display: none are not working

Fit contents into one page

Credits