I have use the @media print and @media screen for print. For @media screen it works fine but for @media print it doesnot show the dotted table as screen.
@media screen{
body{
font-family:"Courier New", Courier, monospace;
font-size:13px;
}
.f1{
text-transform:uppercase;
display:block;
text-align:center;
}
.f2{
text-transform:uppercase;
display:block;
margin-left:10px;
}
.border_bottom{
border-bottom:2px dashed #000;
}
.border_top{
border-top:2px dashed #000;
}
.body_table{
border:1px dashed #CCCCCC;
padding:.5em;
}
}
@media print {
body {
font: 12pt georgia,serif;
}
h1 {
font-size: 18pt;
}
h2 {
font-size: 15pt;
color: #000;
}
.border_bottom{
border-bottom:2px dashed #000;
}
.border_top{
border-top:2px dashed #000;
}
.body_table{
border:1px dashed #CCCCCC;
padding:.5em;
}
}
by these above code the @media screen works fine as i thought. i.e I can see the bill with the dotted border but while on printing part the dotted border is not working and not shown. The bill are on table and as I print the table is not seen too.
My Html code
<body >
<form id="form1" runat="server">
<div id="divprint">
<table>
<tr>
<td>name</td>
</tr>
<tr>
<td>Roll</td>
</tr>
</table>
</div>
<asp:button runat="server" ID="btn_prnt" OnClientClick="CallPrint('divprint')" Text="Print" />
</form>
</body>
Note: I am using Waterfox 18.0.1 browers.
-
3It would be better if you also post a piece of HTML code you use together with the given CSS. This will help us better understand your case and may be someone will be able to tell you how to fix the problem.Pavel Vladov– Pavel Vladov2013年04月10日 07:59:43 +00:00Commented Apr 10, 2013 at 7:59
-
2Also, being specific as to which browser you are using for testing purposes would prove beneficial too.seemly– seemly2013年04月10日 08:03:14 +00:00Commented Apr 10, 2013 at 8:03
1 Answer 1
The HTML you provided does not contain .border_top and .body_table elements. Thus, no borders. Please share the valid CSS and HTML via the http://codepen.io or http://jsbin.com .
When preparing a page for printing, browsers remove some of the decoration. Backgrounds are removed in most browsers. Maybe borders are removed too?