Hello guys, I have a webpage to print that showing some data, I managed to hide all elements that's are not needed in printing, but background color for cells in table not display in printed version, although I've tried to put
<style type="text/css" media="print">
.no-print
{ display: none; }
.bgcol{
background-color: #999;
}
</style>
and tried with css
@media print{
.bgcol{
background-color:#999;
}
}
but still printed without color
it must shows like this
Jump to PostI put together an example that you can look at. Seems like the
@media print { }is working.<!DOCTYPE html> <html> <head> <style> @media print{ #tbl1 {background-color:#999; } </style> </head> <body> <table id="tbl1"> <tr><th>Heading1</th><th>Heading2</th></tr> <tr><td>Cell1</td><td>Cell2</td></tr> <tr><td>Cell3</td><td>Cell4</td></tr> </table> </body> </html>Keep in mind that if …
Jump to PostI'll check your code soon but did you take my example code and try it on a self standing page (not including boot strap or your code)? Did it work for you?
I put together an example that you can look at. Seems like the @media print { } is working.
<!DOCTYPE html>
<html>
<head>
<style>
@media print{
#tbl1 {background-color:#999;
}
</style>
</head>
<body>
<table id="tbl1">
<tr><th>Heading1</th><th>Heading2</th></tr>
<tr><td>Cell1</td><td>Cell2</td></tr>
<tr><td>Cell3</td><td>Cell4</td></tr>
</table>
</body>
</html>
Keep in mind that if the user has to enable "print background colors and images" enabled in their print settings. Your CSS settings will not override that.
its not working for me :(
here is the setting in my browser
my css for print
<style type="text/css">
@media print{
.no-print{
display: none;
}
.bgcol{
background-color: #999;
}
body{
padding-top: 1px;
}
}
</style>
my html
<table width="99%" border="1" cellspacing="0" cellpadding="0">
<tr class="brd">
<td><div class="bgcol" align="center"><strong>NO.</strong></div></td>
<td><div class="bgcol" align="center"><strong>RTU NAME </strong></div></td>
<td><div class="bgcol" align="center"><strong>RTU STATUS </strong></div></td>
</tr>
</table>
still no background color,
FYI am using Bootstrap CSS maybe this affect my css ?
I'll check your code soon but did you take my example code and try it on a self standing page (not including boot strap or your code)? Did it work for you?
oooh , sorry I forget to tell you :), your code works perfectly
my code works as well .
so that why I suspect its because of Bootstrap .
Solved my problem
after watching bootstrap.css
I saw @media print
and and added few lines to my print code
so it became like this
<style type="text/css">
@media print{
.no-print{
display: none;
}
.bgcol{
background-color: #999;
}
body{
padding-top: 1px;
background: transparent;
}
}
</style>
and the result was as I want
this was my nightmare background: transparent;
thanks for helping
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.