I'm offering this tutorial on how to set the printable area of a webpage or web document so that it may be printed on any printer as part of my online check/cheque printer project.
First is to add this to your .CSS file
<style>
@media screen {
.HideFromPrint{ display: block; }
.ShowFromPrint{ display: block !important; }
}
@media print {
.HideFromPrint{ display: none; }
.ShowFromPrint{ display: block !important; }
}
</style>
Then you can call the .HideFromPrint on you html codes
<div class= "ShowFromPrint">
<table border="1">
<tr>
<th>Name</th>
<th class="HideFromPrint">Remarks</th>
<tr>
<td>This area is Printable</td>
<td class="HideFromPrint">Not Printable</td>
</tr>
<tr>
<td>This area is Printable</td>
<td class="HideFromPrint">Not Printable</td>
</tr>
</table>
</div>
<input class="HideFromPrint" TYPE="button" Value="Print Me" onClick="window.print()">
Full example here:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Printable and Not Printable CSS example</title>
</head>
<style>
@media screen {
.HideFromPrint{ display: block; }
.ShowFromPrint{ display: block !important; }
}
@media print {
.HideFromPrint{ display: none; }
.ShowFromPrint{ display: block !important; }
}
</style>
</head>
<body>
<div class= "ShowFromPrint">
<table border="1">
<tr>
<th>Name</th>
<th class="HideFromPrint">Remarks</th>
<tr>
<td>This area is Printable</td>
<td class="HideFromPrint">Not Printable</td>
</tr>
<tr>
<td>This area is Printable</td>
<td class="HideFromPrint">Not Printable</td>
</tr>
</table>
</div>
<input class="HideFromPrint" TYPE="button" Value="Print Me" onClick="window.print()">
</body>
</html>
you can check my post on code project website: project: https://www.codeproject.com/script/Articles/ArticleVersion.aspx?waid=4282204&aid=5374692
