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!

Try Our new product for free!

DocsAI - Create AI support agents with your documents in the most affordable price, starts at 0$. Don't need a bot , but need ai help on your docs just upload and start chating !

Using for a company ? Check out our pricing Just contact me for personalized pricing !