Print Particular part of the screen easily when using CMD/CTRL + P in HTML/CSS

Lets say you have some content on your page and whenever user uses cmd/ctrl + p you have to only print the table part.

Now when printing we will get all the stuff fromm our web page. But expected result is the 2nd Image.

Here's how you do it. Just add print-only class to whatever stuff you want to print.

The visibility CSS property shows or hides an element without changing the layout of a document.

@media print {
  body {
    visibility: hidden;
  }

  .print-only  {
    visibility: visible;
  }
}

Peace 🕊

If you are here it means you may have enjoyed reading this blog. Just follow me @shrihari which will motivate to write more.

You can make a drink Buttermilk 🥛. Small support comes a long way!

Subscribe If you want to receive these blogs in your mail from @Medium for free!