Home • Programming • CSS Nov 9th, 2015 at 03:45 PM

Print specific part of webpage using CSS

<style type="text/css">
  @media print {
  body * {
    visibility: hidden;
  }
  #section-to-print, #section-to-print * {
    visibility: visible;
  }
  #section-to-print {
    position: absolute;
    left: 0;
    top: 0;
  }
}
</style>

Here is the complete code to use.

<html>
<head><title>Print</title>
<style type="text/css">
  @media print {
  body * {
    visibility: hidden;
  }
  #section-to-print, #section-to-print * {
    visibility: visible;
  }
  #section-to-print {
    position: absolute;
    left: 0;
    top: 0;
  }
}
</style>
</head>
<body>
    <div>
    	Your normal page contents
    </div>

    <div id="section-to-print ">
    	Printer version
    </div>
</body>
</html>

/32

Print specific part of webpage using CSS

Comments 2

Share