HTML printing with custom page format

You may always noticed that whenever we try to print a web page with a click on "Print Friendly" or "Print" or "Print Preview", the page will open up a pop up window with a different simple layout with no extravaganzas, say buttons, advertisements, etc.

This is simply achieved with CSS. The solution is as follows.

Defined two sets of CSS for the page targeting "Print" and "Screen". See the example below.

<style type="text/css">
@media screen{
body {color:Red; }
td{font-size:14px;}
.noprint{display:block !important;}

}

@media print {
body {fcolor:Blue;}
td{font-size:7px;}
.noprint{display:none;}
}
</style>

and the page is

<form id="form1" runat="server">
<div style="text-align: center;">
<table id="tblParent" style="width: 90%">
<tr class="noprint">
<td>
This is just a demonstration of how to make HTML printing</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr class="noprint">
<td style="text-align: right">
<a href="#" onclick="window.print()">Print</a>  <a href="#" onclick="window.close()">Close</a>
</td>
</tr>
<tr>
<th>
Employee Informations</th>
</tr>
<tr>
<td>
<asp:Repeater ID="Repeater1" runat="server">
<ItemTemplate>
<table id="tblEmployee" style="width: 100%">
<tr>
<td style="width: 5%;">
</td>
<td style="width: 30%;">
</td>
<td style="width: 5%;">
</td>
<td style="width: 60%;">
</td>
</tr>
<tr>
<td>
</td>
<td align="left">
Last Name</td>
<td>
:</td>
<td align="left">
<%# Eval("LastName") %>
</td>
</tr>
<tr>
<td>
</td>
<td align="left">
First Name</td>
<td>
:</td>
<td align="left">
<%# Eval("firstname") %>
</td>
</tr>
<tr>
<td>
</td>
<td align="left">
Title</td>
<td>
:</td>
<td align="left">
<%# Eval("title") %>
</td>
</tr>
</table>
</ItemTemplate>
</asp:Repeater>
</td>
</tr>
</table>
</div>
</form>

Here the section of the page with class .noprint is displayed while displaying on the "screen" and hidden while printing, say buttons and other items


-::-