Forced Print Styles
check it out
HTML
<h1>This is an H1 tag</h1>
<table cellmargin="0" cellpadding="0">
<tr>
<td>red</td>
<td>green</td>
<td>blue</td>
</tr>
<tr>
<td>black</td>
<td>gray</td>
<td>white</td>
</tr>
</table>
<p>Go ahead and look at the print preview. Pretty dope huh? This treatment works for email templates too.</p>
CSS
html,body {margin:0;padding:0;}
h1 {
background-color:gold;
background-image:url("img/404040.png");
background-repeat:repeat;
border:30px solid #404040;
height:0;
width:100%;
color:#FFFFFF !important;
margin:0 0 10px 0;
line-height:0px;
}
table {margin:0;padding:0;border:0;width:100%;}
table tr {margin:0;padding:0;border:0;}
table tr td {
background-color:gold;
background-image:url("img/666666.png");
background-repeat:repeat;
box-shadow: inset 0 0 0 1000px gold;
border:30px solid #666;
height:0;
width:30%;
color:#333 !important;
font-size:20px;
font-weight:bold;
text-transform:UPPERCASE;
margin:0 -20px 10px;
line-height:0px;
}
table tr:nth-child(1) td:nth-child(1) {
border:30px solid red;
}
table tr:nth-child(1) td:nth-child(2) {
border:30px solid #00ff33;
}
table tr:nth-child(1) td:nth-child(3) {
border:30px solid rgba(51, 51, 255, 1.0);
color:#FFF !important;
}
table tr:nth-child(2) td {
font-size:14px;
text-indent:15px;
}
table tr:nth-child(2) td:nth-child(1) {
border:15px solid #000;
color:#FFF !important;
}
table tr:nth-child(2) td:nth-child(2) {
border:15px solid #666;
color:#FFF !important;
}
table tr:nth-child(2) td:nth-child(3) {
border:15px solid #FFF;
color:#000 !important;
}
p {padding:10px 30px;}