Login

Please fill in your details to login.





printing part of a page using css

This page is mainly about printing_part_of_a_page_using_css
1. Inspect the HTML of the page and find the block you would like to print.
2. If there isn't a specific block which contains the content you would like to print, then you might have to edit the HTML to add it in.
3. Make sure the block has an ID associated with it. This will make sure that only this portion of the page prints.
4. Select the block and press the '+' button in the style editor to add a custom rule for that element in the inspector stylesheet
5. Add the following CSS rules

@media print{
  *{
    visibility:hidden;
  }
  #id-to-print {
    visibility:visible;
    position: absolute;
    left: 0;
    top: 0;
  }
  #id-to-print *{
    visibility: visible !important;
  }
}


You can force the page to render in print layout by choosing...

'Emulate css media type > print'

...from dev tools menu > more tools
Last modified: May 8th, 2024
The Computing Café works best in landscape mode.
Rotate your device.
Dismiss Warning