DEV Community 👩‍💻👨‍💻

Cover image for Print Particular part of the screen easily when using CMD/CTRL + P in HTML/CSS
Shrihari Mohan
Shrihari Mohan

Posted on

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.

Random stuffy using tailwind

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

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;
  }
}
Enter fullscreen mode Exit fullscreen mode

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!

Top comments (0)

We want your help! Become a Tag Moderator.
Check out this survey and help us moderate our community by becoming a tag moderator here at DEV.